javascript - 如何使用 jquery/javascript 验证表单？

Question

这个问题已经有答案了:

( HTML5, JQuery) Attributes of Input elements are ignored by JQuery (3 个回答)

已关闭 4 年前。

我有一个如下所示的正常形式:

<form id="selectionForm" class="form-horizontal">
   <div>
      <div class="form-group row">
         <div class="col-md-4 form-group">
            <label  for="selectionDate">Selection
            Date</label>
            <input type="text" id="selectionDate" name="selectionDate" class="nepali-calendar ndp-nepali-calendar form-control" onfocus="showNdpCalendarBox('selectionDate')" required > 
            <div style="margin: 10px;"></div>
         </div>
         <div class="col-md-4 form-group">
            <label class="col-md-12" for="selectedBy">Selected By</label> <label
               class="col-md-6"> <input style="margin: 10px;"
               type="radio" name="selectedBy" value="Department" required />Department
            </label> 
            <label class="col-md-6">
               <input style="margin: 10px;"
                  type="radio" name="selectedBy" value="Office"  required />Office
               <div style="margin: 10px;"></div>
            </label>
         </div>
         <div class="form-group col-md-4">
            <label for="panEximNumber">PAN/EXIM Number</label> <input
               type="text" id="panEximNumber" class="form-control"
               name="eximPanNo" placeholder="Enter the PanEximNumber" pattern=".{9,10}" title="Characters must be only 9 characters" required >
         </div>
      </div>
      <div class="form-group row">
         <div class="form-group col-md-4">
            <label for="paneximnepali">PAN/EXIM Name(Nepali)</label> <font
               face="pcs"> <input type="text" id="panEximNameNepali"
               class="form-control" name="eximPanName"
               placeholder="Enter the name" required></font>
         </div>
         <div class="form-group col-md-4">
            <label for="paneximeng">PAN/EXIM Name(English)</label> <input
               type="text" id="paneximEnglish" class="form-control"
               name="eximPanNameEng"
               placeholder="Enter the Pan Exim Name(English)" required>
         </div>
         <div class="form-group col-md-4">
            <label for="age">Exim/Pan Address(Nepali)</label> <font
               face="pcs"> <input type="text" id="address"
               class="form-control" name="eximPanAddr"
               placeholder="Enter the address" required>
            </font>
         </div>
      </div>
      <!--row 3-->
      <div class="form-group row">
         <div class="form-group col-md-4">
            <label for="age">Exim/Pan Address(English)</label> <input
               type="text" id="address" class="form-control"
               name="eximPanAddrEng" placeholder="Enter the address(English)" required>
         </div>
         <div class="form-group col-md-4">
            <label for="age">Exim/Pan Phone Number</label> <input type="text"
               id="phoneNumber" class="form-control" name="eximPanPhone"
               placeholder="Enter the Phone number" required>
         </div>
         <div class="form-group col-md-4">
            <label for="selectionType">Selection Type</label> 
            <select
               class="form-control" id="selectionType" name="selectionType" required>
               <option value="" selected disabled hidden>Choose here</option>
               <option value="firm">Firm</option>
               <option value="consignment">Consignment</option>
               <option value="product">Product</option>
            </select>
         </div>
      </div>
      <!--row 4-->
      <div class="form-group row">
         <div class="form-group col-md-4 consNo" id="consNo">
            <label for="consignentNo">Consignment No</label> <input
               type="text" id="consignentNo" class="form-control"
               placeholder="Enter the consignment No" name="consignmentNo" />
         </div>
         <div class="form-group col-md-4 consDate">
            <label for="consignentDate">Consignment Date</label> <input
               type="text" id="consignentDate"
               class="nepali-calendar ndp-nepali-calendar form-control"
               onfocus="showNdpCalendarBox('consignentDate')"
               name="consignmentDate" placeholder="Enter the consignment date" />
         </div>
         <div class="form-group col-md-4 prodName">
            <label for="selectionProductName">Product Name</label> <input
               type="text" id="productName" class="form-control"
               name="productName" placeholder="Enter the product Name" />
         </div>
      </div>
     <button type="submit" style="margin-bottom: 50px;"
                  class="btn btn-success pull-right" onclick="submitSelection();">Submit</button>
   </div>
</form>

我转到提交操作的按钮是:

我添加了必填字段以及其他 html5 验证属性。单击“提交”按钮时，将单击表单提交方法。因此，我尝试了以下方法进行验证，但它不起作用。

<button type="submit" style="margin-bottom: 50px;"
   class="btn btn-success pull-right" onclick="submitSelection();">Submit</button>

执行提交操作的代码是:

function submitSelection() {
            document.selectionForm.submit(); 

             event.preventDefault(); 
              $.ajax({
                            //ajax code to submit operation
                    }); 

                } 

我尝试通过 document.selectionForm.submit(); 触发验证操作但它不起作用。我需要在通过 AJAX 提交之前验证我的表单。如何验证表单？

Answer 1

最好的方法是这样的，

在onSubmit中添加功能事件处理程序。然后只有当你按回车键时才会提交。

<form onsubmit='return validateMyform()'>

然后实现您的验证函数 validateMyform() .

<script>

 function validateMyform(){

 // your implementation
 var isValid = true;

 //make your validation something like
 if($("#panEximNameNepali").value.length < 6){
   isValid = false;
 }

 if($("#selectionType").value == ""){
   isValid = false;
 }


if(isValid == true){

  submitSelection();

}else{

  // show error message.

}

return false;

}

</script>

这里return false;很重要。如果您没有输入 return false;表单将直接提交。

然后实现您的 AJAX 提交功能 submitSelection()