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

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

谢谢。

Answer 1

这是您在评论中的问题。

在这里，我在输入中添加了边框（将某类替换为您输入的类，或者将其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
    }

您还可以添加类或删除类，并将该特定类赋予红色或绿色或任何样式。

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

或

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

Node.js-jQuery代码忽略输入的必需属性

1 个答案: