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现场解决的问题，我加数字上的规则，但我仍然有两次提交问题。