在jquery中提交之前检查所有字段是否有效？答案

【问题标题】：check if all the field valid before submit in jquery?在jquery中提交之前检查所有字段是否有效？
【发布时间】：2014-05-22 10:35:29
【问题描述】：

在 jquery 提交功能中我有：

   $('form').submit(function(e){    

            $('.default').each(function(){
                var self = this;

                    $.post( 
                        '/serviceportal/Users/validate_form',
                        {field:$(this).attr('id'),value:$(this).val()
                        },
                        function(error){    
                                handleNameValidation(error,self);   
                        }
                    );
                    function handleNameValidation(error,el){
                     var $parent = $(el).parent();
                        if(error.length>0){

                                if($('span.error-message',$parent).length==0){
                                $parent.append('<span class="error-message">'+ error + '</span>');
                                }
                        }
                        else{
                             $parent.removeClass('error-message');
                             $('span.error-message',$parent).fadeOut();
                        }
                }       
        });
        // Prevent form submission
          e.preventDefault();

    });

当我提交表单时，它会进行客户端验证，但在客户端验证后它会阻止表单提交。问题是由于e.preventDefault(); 因为它阻止了表单提交。如何在每个字段验证后检查表单是否有效。任何的想法？或者请为我提供另一种通过提交验证 jquery 表单的方式。

【问题讨论】：

标签： jquery forms validation

【解决方案1】：

通常，您会在验证期间跟踪所有错误（例如）在数组中，或者在发生任何错误时使用设置为 true 的布尔值。

然后，您可以将 preventDefault 包装在条件检查中，检查错误的长度和/或您的标记。

【讨论】：

【解决方案2】：

你可以使用像this这样的jquery表单验证插件

<form action="" id="registration-form">
    <p>
      E-mail
      <input name="email" data-validation="email">
    </p>
    <p>
      User name
      <input name="user" data-validation="length alphanumeric" 
         data-validation-length="3-12" data-validation-error-msg="The user name has to be an alphanumeric value between 3-12 characters">
    </p>
    <p>
      Password
      <input name="pass_confirmation" data-validation="strength" 
         data-validation-strength="2">
    </p>
    <p>
      Repeat password
      <input name="pass" data-validation="confirmation">
    </p>
    <p>
      Birth date
      <input name="birth" data-validation="birthdate" 
         data-validation-help="yyyy-mm-dd">
    </p>
    <p>
      Country
      <input name="country" id="country" data-validation="country">
    </p>
    <p>
      Profile image
      <input type="file" data-validation="mime size" data-validation-allowing="jpg, png" 
         data-validation-max-size="512kb">
    </p>
    <p>
      User Presentation (<span id="pres-max-length">100</span> characters left)
      <textarea name="presentation" id="presentation"></textarea>
    </p>
    <p>
      <input type="checkbox" data-validation="required" 
         data-validation-error-msg="You have to agree to our terms">
      I agree to the <a href="..." target="_blank">terms of service</a>
    </p>
    <p>
      <input type="submit">
    </p>
  </form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
<script>

  $.validate({
    modules : 'location, date, security, file',
    onModulesLoaded : function() {
      $('#country').suggestCountry();
    }
  });

  // Restrict presentation length
  $('#presentation').restrictLength( $('#pres-max-length') );

</script>

另一种方法是使用 jquery.validate.js 和 jquery.form.js，这是一个 example

【讨论】：