jquery-form-validator.js: Form input validates, but form itself fails validation. Only one input in form

Question

I'm using jQuery-Form-Validator and most of it is going fine.

I have a form that contains only an email field and a submit button. The email field validates correctly on blur, but when the form is submitted, I get the error message saying the form isn't valid (not the field).

I'm lost.

Here are all of the code bits...

<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>

Then the validator script is called and it finishes with:

<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>

You're welcome to look at it live, but you have to take a three-question quiz to get to it. Answers: "I own," "$101-150," and "No Shade."

Thank you for your help!

Answer 1

You probably should remove this part:

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

It will always tell the validator that you have an element that is invalid when the form gets submitted.