Question

我使用的是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>

欢迎你来看看它live，但是你必须参加一个三个问题的测验来实现它。答案：＆＃34;我拥有，＆＃34; ＆＃34; $ 101-150＆＃34;和＃34;没有阴影。＆＃34;

感谢您的帮助！

Answer 1

您可能应删除此部分：

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

它将始终告诉验证者，在提交表单时，您有一个无效的元素。

jquery-form-validator.js：表单输入验证，但表单本身验证失败。表格中只有一个输入

1 个答案: