时间戳

首页 > 解决方案 > 如何使用 jquery/javascript 验证表单？

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

问题描述

我有一个看起来像这样的正常形式：

<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 提交之前验证我的表单。如何验证表单？

标签： javascriptjqueryhtml

解决方案

最好的方法是这样的，

onSubmit在事件处理程序中添加函数。然后只有当您按 Enter 时它才会提交。

<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()

推荐阅读