1

我正在使用 jQuery-Form-Validator 并且大部分都运行良好。

我有一个只包含一个电子邮件字段和一个提交按钮的表单。电子邮件字段在模糊时正确验证，但是在提交表单时，我收到错误消息，指出表单无效（不是字段）。

我迷路了。

这是所有的代码位...

<form id="form_email" name="form_email" class="justify-content-center" onsubmit="return false;">
    <div id="email-group" class="form-group">
        <input class="form-control form-control-lg mr-1" type="text" id="email" name="email" placeholder="Email Address" value="" data-validation="email" data-validation-error-msg-container="#email-error-dialog" autocomplete="on" /> 
        <p class="form-control-feedback" id="email-error-dialog"></p>
        <p class="text-muted">We will only share your email address with other companies when you explicitly give us permission.</p>
        <input type="submit" class="btn btn-primary btn-lg" id="email-next" value="Save" />
    </div>
</form>

<script>
    $( "#form_email" ).submit(function( event ) {
        updateRecord('user_inputs', 'fingerprint', fp2_hash, 'email',   $( "email" ).value);
        //alert( "Handler for .submit() called." );
        //event.preventDefault();
    });

    $( "#email" ).on( 'validation', function(evt, valid) {

      // If it's a valid email address...
      if ( valid == true ) {
            // Update style
            if ( $( "#email-group" ).hasClass( "has-danger" ) ) $( "#email-group" ).removeClass( "has-danger" );
            if ( $( "#email" ).hasClass( "form-control-danger" ) ) $( "#email" ).removeClass( "form-control-danger" );

            $( "#email-group" ).addClass( "has-success");
            $( "#email" ).addClass( "form-control-success" );
      } else if ( valid == false) {
            // Update style
            if ( $( "#email-group" ).hasClass( "has-success" ) ) $( "#email-group" ).removeClass( "has-success" ); 
            if ( $( "#email" ).hasClass( "form-control-success" ) ) $( "#email" ).removeClass( "form-control-success" );

            $( "#email-group" ).addClass( "has-danger" );
            $( "#email" ).addClass( "form-control-danger" );
            $( "#email-error-dialog" ).addClass( "has-danger" );
      }  
    });
</script>

然后调用验证器脚本并完成：

<script type="text/javascript">
    $.validate({
        modules : 'html5, toggleDisabled',
        forms : '#leads, #form_email',
        disabledFormFilter : 'form.toggle-disabled',
        showErrorDialogs : false,
        successElementClass : 'has-success',
        errorElementClass : 'has-danger',
        onError : function($form) {
              alert('Validation of form '+$form.attr('id')+' failed!');
        },
        onSuccess : function($form) {
              alert('The form '+$form.attr('id')+' is valid!');
              return true; // Will stop the submission of the form
        },
        onValidate : function($form) {
              return {
                element : $( this),
                message : 'This input has an invalid value for some reason'
        }
    },
    onElementValidate : function(valid, $el, $form, errorMess) {
        console.log('Input ' +$el.attr('name')+ ' is ' + ( valid ? 'VALID':'NOT VALID') );
    },
    validateOnBlur : true, // disable validation when input looses focus
        errorMessagePosition : 'inline', // Default. Instead of top
        scrollToTopOnError : true // Set this property to true on longer forms
    });
</script>

欢迎您现场观看，但您必须进行三个问题的测验才能了解它。答案：“我拥有”、“101-150 美元”和“No Shade”。

谢谢您的帮助！

4

1 回答 1

2

您可能应该删除这部分：

onValidate : function($form) {
          return {
            element : $( this),
            message : 'This input has an invalid value for some reason'
    }
}

当表单被提交时，它总是会告诉验证器你有一个无效的元素。

于 2017-05-05T07:04:09.893 回答