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

【问题标题】：Bootstrap | JQuery: How to enable "Required" validation on fields during Form Submit Click?引导程序 | JQuery：如何在表单提交单击期间对字段启用“必需”验证？
【发布时间】：2021-01-11 03:23:37
【问题描述】：

以下是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 调用中启用所有必填字段检查？

【问题讨论】：

这是什么？？ documentCommon尝试更改$.ajax
我在关于 jQuery Validate 插件的问题中看不到任何内容。删除标签。

标签： jquery validation jsp bootstrap-4 jquery-ajax

【解决方案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>

【讨论】：