如何使用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>

---

我试图通过document.selectionForm.submit来启动验证操作；但是它不起作用。在通过AJAX提交之前，我需要验证我的表单。如何验证表单？

最好的方法是这样

在onSubmit事件处理程序中添加函数。那么只有当你点击回车键时它才会提交

然后实现验证函数validateMyform

这里返回假；这很重要。如果你没有把返回错误；表格将直接提交

---

然后实现AJAX提交函数submitSelection

试试这个，你可以用html5 attr添加多输入类型

<form action="" method="POST">
      <p>
        E-mail:
        <input data-validation="email" data-validation-error-msg="You did not enter a valid e-mail">
      </p>
      <p>
        Password:
        <input type="password" data-validation="required" 
       data-validation-error-msg="You did not enter a password">
      </p>
      <p>
        <input type="submit" value="Login">
      </p>
    </form>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
    <script>
    $.validate({
      validateOnBlur : false, // disable validation when input looses focus
      errorMessagePosition : 'top', // Instead of 'inline' which is default
      scrollToTopOnError : false // Set this property to true on longer forms
    });
    </script>

---

这是什么？我如何初始化它？你能更清楚地告诉我吗？我没说全部。我更新了我的答案，我只能给你一个想法。无法编写完整的代码

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

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

                } 

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

<form action="" method="POST">
      <p>
        E-mail:
        <input data-validation="email" data-validation-error-msg="You did not enter a valid e-mail">
      </p>
      <p>
        Password:
        <input type="password" data-validation="required" 
       data-validation-error-msg="You did not enter a password">
      </p>
      <p>
        <input type="submit" value="Login">
      </p>
    </form>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
    <script>
    $.validate({
      validateOnBlur : false, // disable validation when input looses focus
      errorMessagePosition : 'top', // Instead of 'inline' which is default
      scrollToTopOnError : false // Set this property to true on longer forms
    });
    </script>