Question

我有一个正常的表格，看起来像这样：

<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事件处理程序中添加函数。然后，只有在您按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()

Answer 2

尝试此操作，您可以使用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>

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

2 个答案: