jquery - 引导程序 | JQuery：如何在表单提交单击期间对字段启用“必需”验证？

Question

以下是JS代码：

$('#createCust').on('click', function(e) {
            e.preventDefault();
            documentCommon.ajax({
                dataType : 'text',
                url : "/createcustomer",
                data : $("body form:first").serialize(),
                success : function(data) {
                    $(".dialogTitle").html("");
                    $(".dialogTitle").html("Add Customer");
                    $(".actualData").html("");
                    $(".actualData").html(data);
                    $('#modalViewDialog').modal('show');
                }
            });
        });

以下是按钮：

<form:form method="POST" modelAttribute="customerForm"
        class="form-signin" action="/createcustomer">
  <form:input type="text" path="customerName" class="form-control"
                                placeholder="Customer Name" required="required"></form:input>
  <button type="submit" id="createCust" class="btn btn-primary">Create</button>

当我删除 JS 代码时它工作正常，但我想要 ajax 调用，所以我不能依赖整个页面提交。有没有办法在 JS 调用中启用所有必需的字段检查？

标签： jqueryvalidationjspbootstrap-4jquery-ajax

Answer 1

实现上述目标的另一种方法是使用检查输入是否为空，并!= ""根据此进行 ajax 调用或显示错误。

这是一个示例，如果您知道输入的名称并希望手动检查每个输入。

演示代码：

$('#createCust').on('click', function(e) {
  e.preventDefault();
  //check if customer not empty
  if ($("input[name='customerName']").val() != "") {
    console.log("go to backend")
    /*your ajax call*/

  } else {
    //do something to show error
    console.log("please fill above")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" modelAttribute="customerForm" class="form-signin" action="/createcustomer">
  <input type="text" path="customerName" name="customerName" class="form-control" placeholder="Customer Name">
  <button type="submit" id="createCust" class="btn btn-primary">Create</button>
</form>

如果您有较大的表单，那么您可以遍历表单内的所有输入，并val()根据此调用您的 ajax 或显示错误检查是否不为空。根据您的要求修改下面的代码。

演示代码：

$('#createCust').on('click', function(e) {
  e.preventDefault();
  var count =0
  var validate_ = true;
  var inputs_=$(".form-signin > input").length;
  //loop through form inputs
  $(".form-signin > input").each(function() {
    if ($(this).val() != "") {
    count++;
      validate_ = true; //not null
    } else {
    count--;
      validate_ = false;
    }
  })
  console.log(inputs_ == count)
  //check validate status
  if (validate_ && inputs_ == count) {
    console.log("go to backend")
    /*your ajax call*/

  } else {
    //do something to show error
    console.log("please fill above")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" modelAttribute="customerForm" class="form-signin" action="/createcustomer">
  <input type="text" path="customerName" name="customerName" class="form-control" placeholder="Customer Name"><br/>
  <input type="text" path="customerName" name="soemthing" class="form-control" placeholder="somthing"><br/>
  <input type="text" path="customerName" name="somthing" class="form-control" placeholder="somthing"><br/>
  <button type="submit" id="createCust" class="btn btn-primary">Create</button><br/>
</form>