Q: Node.js - jquery code ignores the input required attribute The jquery function runs ignoring the "required" attribute added to the input. Only after completing the POST request the "required" warning pops up.
index.handlebars
<form method="POST">
     <label for="burgerName">Nome do Burger:</label>
     <br>
     <input type="text" name="burgerName" placeholder="Nome do Burger" class="form-control">

     <button type="submit" id="add" class="btn btn-primary mt-4">Adicionar Burger</button>
</form>

app.js
$("input[name='burgerName']").attr("required",true)

$("button[id='add']").on("click", (event) => {
    $("button[id='add']").attr("disabled","disabled")

    const burgerName = $("input[name='burgerName']").val()
    const burger = {
        bName: burgerName
    }

    $.ajax({
        url:"/burgers/add",
        method: "POST",
        data: burger
    }).then((burger) => {
        addBurgerSuccess(burger)
    }).catch((erro) => {
        addBurgerFails(erro)
    })

    $("button[id='add']").removeAttr("disabled")
})

I need the "required" preventing empty data reaching the server, so , in order to achieve that, I need this restriction be activated before the request being made.
Thank you in advance.


*

*The server accepts an empty input

*Only after closing the success message the warnings are displayed

A: This is for your question in comment. 
Here I added the border to the input (replace someclass with the class of your input or if its id #someid).
$("button[id='add']").on("click", (event) => {
    $("button[id='add']").attr("disabled","disabled")

    const burgerName = $("input[name='burgerName']").val();
    if (burgerName == ""){
    $(".someclass").css("border","1px solid red");
    }
    else {
    $(".someclass").css("border","1px solid green");
    }
    const burger = {
        bName: burgerName
    }

You can also addclass or removeclass as well and give that specific class red or green or any style.
$(".someclass").addClass("warning");

or
$(".someclass").removeClass("warning");

