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