JQuery驗證和表單提交 - 提交按鈕需要按兩次

Question

我總是新手到javascript/jquery。

我想通過JQuery驗證註冊表單，驗證工作正常，但在提交表單之前我有一個小問題。

準確地說，用戶必須按第一次提交兩次，才能驗證運行，第二次提交表單。

什麼解決方案按一次提交和代碼來通過所有驗證規則，然後提交公式？

$('document').ready(function() 
 
{ 
 
    // name validation 
 
    var nameregex = /^[a-zA-Z ]+$/; 
 

 
    $.validator.addMethod("validname", function(value, element) { 
 
     return this.optional(element) || nameregex.test(value); 
 
    }); 
 

 
    // valid email pattern 
 
    var eregex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
 

 
    $.validator.addMethod("validemail", function(value, element) { 
 
     return this.optional(element) || eregex.test(value); 
 
    }); 
 

 
    $("#register-form").validate({ 
 

 
     rules: 
 
     { 
 
      name: { 
 
       required: true, 
 
       validname: true, 
 
       minlength: 4 
 
      }, 
 
      email: { 
 
       required: true, 
 
       email: true, 
 
       validemail: true 
 
      }, 
 
      mobile_number: { 
 
       required: true 
 
       //phoneUK: true 
 
      }, 
 
     }, 
 
     messages: 
 
     { 
 
      name: { 
 
       required: "Please enter your first name", 
 
       validname: "Name must contain only alphabets and space", 
 
       minlength: "Your name is too short" 
 
      }, 
 
      email: { 
 
       required: "Please enter e-mail address", 
 
       validemail: "Enter a valid e-mail address" 
 
      }, 
 
      mobile_number:{ 
 
       required: "Please enter a valid phone number" 
 
      } 
 
     }, 
 
     errorPlacement : function(error, element) { 
 
      $(element).closest('.form-group').find('.help-block').html(error.html()); 
 
     }, 
 
     highlight : function(element) { 
 
      $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); 
 
     }, 
 
     unhighlight: function(element, errorClass, validClass) { 
 
      $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); 
 
      $(element).closest('.form-group').find('.help-block').html(''); 
 
     }, 
 

 
     submitHandler: function(form) { 
 
      $("#register-form").on("submit", function (e) { 
 
       e.preventDefault(); 
 

 
       var postData = new FormData($(this)[0]); 
 
       var formURL = $(this).attr("action"); 
 
       var method = $(this).attr("method"); 
 

 
       $.ajax({ 
 
        url: formURL, 
 
        type: method, 
 
        data: postData, 
 
        cache: false, 
 
        contentType: false, 
 
        processData: false, 
 
        success: function (data) { 
 
         $("#register_dialog .modal-header .modal-title").html("Thank you!"); 
 
         $("#register_dialog .modal-body").html(data); 
 
         $("#submitForm").remove(); 
 
        }, 
 
        error: function (jqXHR, status, error) { 
 
         console.log(status + ": " + error); 
 
        } 
 
       }); 
 
      }); 
 
     } 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
 
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
 
      crossorigin="anonymous"></script> 
 
<div id="register_dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="register_dialog" 
 
      aria-hidden="true"> 
 
      <div class="modal-dialog" role="document"> 
 
       <div class="modal-content modal-sm"> 
 
        <div class="modal-header form-group"> 
 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span 
 
           aria-hidden="true">&times;</span></button> 
 
         <h4 class="modal-title" id="registerDialogLabel">Registration form</h4> 
 
        </div> 
 
        <div class="modal-body"> 
 
         <hr /> 
 
         <form method="POST" id="register-form" name="register-form" action="form.php" 
 
           autocomplete="off"> 
 

 
          <div class="form-group"> 
 
           <div class="input-group"> 
 
            <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div> 
 
            <input type="text" class="form-control" name="name" id="name" minlength="3" 
 
              placeholder="First Name" 
 
              /> 
 
           </div> 
 
           <span class="help-block" id="error"></span> 
 
          </div> 
 

 
          <div class="form-group"> 
 
           <div class="input-group"> 
 
            <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div> 
 
            <input type="text" class="form-control" name="email" id="email" 
 
              placeholder="E-mail address" 
 
            /> 
 
           </div> 
 
           <span class="help-block" id="error"></span> 
 
          </div> 
 

 
          <div class="form-group"> 
 
           <div class="input-group"> 
 
            <div class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></div> 
 
            <input type="number" 
 
              class="form-control" name="mobile_number" id="mobile_number" 
 
              placeholder="Contact Number" 
 
              /> 
 
            </div> 
 
           <span class="help-block" id="error"></span> 
 
          </div> 
 

 
          <hr/> 
 
          <button type="submit" class="btn btn-primary btn-fresh"> 
 
           <span class="glyphicon glyphicon-log-in"></span> Submit 
 
          </button> 
 
         </form> 
 
        </div> 
 
        <div class="modal-footer"></div> 
 
       </div> 
 
      </div> 
 
     </div>

Answer 1

用戶必須按提交兩次......

它的發生，因爲你已經把一個.on('submit')插件的submitHandler函數中：

submitHandler: function(form) { 
    $("#register-form").on("submit", function (e) { // <- ?! 
     e.preventDefault(); 
     .... 

實際上，這是一個submit在submit處理程序中的處理程序。

刪除.on('submit')，您將立即修復「雙擊」問題。該插件已正確處理關鍵事件，並已阻止默認行爲，因此您不需要.preventDefault()。表格有效後，submitHandler只會觸發。

此外，您可以簡單地使用提供的form參數。

$("#register-form").validate({ 
    ..... 
    submitHandler: function(form) { 
     var postData = new FormData($(form)), 
      formURL = $(form).attr("action"), 
      method = $(form).attr("method"); 

     $.ajax({ 
      .... 
     }); 
     return false; 
    } 
}); 

Answer 2

嘗試行動= 「JavaScript的:;」

<form method="POST" id="register-form" name="register-form" action="javascript:;" 
            autocomplete="off"> 

Answer 3

我通過改變輸入類型爲文本，爲MOBILE_NUMBER現場解決的問題，我加數字上的規則，但我仍然有兩次提交問題。