Node.js - jquery 代码忽略输入所需的属性

Question

jquery 函数运行时忽略了添加到输入的 "required" 属性。只有在完成 POST 请求后才会弹出 "required" 警告。

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")
})

我需要 "required" 防止空数据到达服务器，因此，为了实现这一点，我需要在发出请求之前激活此限制。

提前致谢。

The server accepts an empty input
Only after closing the success message the warnings are displayed

Answer 1

这是针对您在评论中提出的问题。

我在这里为输入添加了边框（将 someclass 替换为您输入的 class 或者它的 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
    }

您也可以添加class 或删除class 并赋予特定的 class 红色或绿色或任何样式。

$(".someclass").addClass("warning");

或

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

Node.js - jquery 代码忽略输入所需的属性

Node.js - jquery code ignores the input required attribute

javascript

jquery

handlebars.js