We Keep Coding

Formvalidation.io: event when certain field is valid

I have a beginner's question on Formvalidation.io. Maybe it's not even specific for that library but more related to Javascript in general.
I'd like to disable a validator after a certain field (let's say its name is postcode) has been validated and is valid. However, all my approaches result in either the validator not being disabled or being disabled if any field of my form is valid (not only the specific one).
I use the core.field.valid event and the library's documentation states:
The event parameter presents the field name.
I'm uncertain how that happens.
I tried:
document.addEventListener('DOMContentLoaded', function(e) {
const fv = FormValidation.formValidation(
document.getElementById('adminForm'),
{
fields: {
postcode: {
validators: {
notEmpty: {
message: 'Please enter a postcode.'
}
}
}
},
plugins: {
submitButton: new FormValidation.plugins.SubmitButton(),
defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
trigger: new FormValidation.plugins.Trigger({
event: {
postcode: 'change',
}
})
}
}
);
fv.on('core.field.valid', function(e) {
if (e.field === 'postcode') {
fv.disableValidator('postcode');
}
});
});
But the if-condition is not true even when the field is validated and valid.
(tried to adapt it from the example given here)
I also tried what I found in the documentation on the on() method (as it states regarding function(field): "field is name of invalid field"):
const validFieldHandler = function(postcode) {
fv.disableValidator('postcode');
};
fv.on('core.field.valid', validFieldHandler);
Result is the same (validator is not disabled).
The following however (as probably to expect) disables the validator if any field of the form is valid.
fv.on('core.field.valid', function(e) {
fv.disableValidator('postcode');
});
Thank you for any advice you can offer! It's my first question here, so please let me know if you need additional information!
Best regards,
Sebastian

Found the solution myself:
fv.on('core.field.valid', function(field) {
if (field === 'postcode') {
fv.disableValidator('postcode');
}
});

Bootstrap Validator summernote field doesn't revalidate

I'm using the bootstrap validator plugin to valid my form client side and it seems to fail when revalidating a summernote textarea. It validates the first time, but when the text is updated the validation doesn't update.
Here's the validation (snipped out other validation fields)
function validateEditor() {
// Revalidate the content when its value is changed by Summernote
$('#application-form').bootstrapValidator('revalidateField', 'application'));
};
$('.application-form')
.bootstrapValidator({
excluded: [':disabled'],
fields: {
application: {
validators: {
callback: {
message: 'Please do not leave this blank.',
callback: function(value, validator) {
var code = $('[name="application"]').code();
// <p><br></p> is code generated by Summernote for empty content
return (code !== '' && code !== '<p><br></p>');
}
}
}
}
}
}).on('success.form.bv', function(e) {
e.preventDefault();
console.log('Form successfully validated.');
})
.find('[name="application"]')
.summernote({
height: 400,
onkeyup: function() {
validateEditor(); // Revalidate form onkeyup
},
onpaste: function() {
validateEditor(); // Revalidate form on paste
},
});
Here's the markup (again snipped from other fields)
<div class="form-group">
<textarea name="application"></textarea>
</div>
This is a huge issue because if the textarea is left blank the first time, the form can never be resubmitted since the validation doesn't update when the error is fixed by the user.

I had the same problem, but with FormValidation.io, which is a very similar plugin.
Solution : My textarea had the required attribute. I removed it and bam, problem solved.
Now, I'm genuinely sorry if this isn't a direct solution to your problem, your code obviously doesn't have the required attribute, but I just thought I'd share with other people still, because this was driving me nuts for hours and this was the most relevant post about this problem on here.
That is all.

Jquery validation plugin | resetForm is not working

I am trying to clear all error messages as well error highlighting when user click on the clear form button, below are actual requirements
Validate form using Jquery validation
When user click on a field error message should be cleared (per field)
On clicking reset button, every error should be cleared
here is my code
$( document ).ready(function(){
var validator = $("#register_form").validate({
validator.resetForm();
focusCleanup: true,
rules: {
// custom rules
},
messages: {
// custom messages
}
});
For me, first 2 things are working, but when I am trying to clear complete form, I am not able to do this.this is how I am trying to clear it
function clearInputForm(){
alert("");
var validator1 = $( "#register_form" ).validate();
validator1.resetForm();
$("#register_form")[0].reset();
}
But nothing is happening , though with $("#register_form")[0].reset();, form fields are getting clear, but error messages are not getting cleared.

Quote OP:
1) Validate form using Jquery validation
You cannot put the validator.resetForm(); method inside of the .validate() method.
.validate() is a plugin method where the only thing that can go inside is a comma separated map of the allowed options, {option:value, option:value, etc.}, as per the .validate() method documentation.
resetForm() method documentation
$("#register_form").validate({
rules: {
firstname: {
required: true
},
lastname: {
required: true
},
cell: {
required: true
}
},
messages: {
// custom messages
}
});
.validate() method DEMO: http://jsfiddle.net/P46gL/
Quote OP:
2) When user click on a field error message should be cleared (per field)
This is thanks to the focusCleanup option. As you've already done, set it to true and when you click on the field with an error, the error clears.
$("#register_form").validate({
focusCleanup: true,
rules: {
....
focusCleanup DEMO: http://jsfiddle.net/P46gL/1/
Quote OP:
3) On clicking reset button, every error should be cleared
You would call the resetForm() method from within a click handler of the reset button. This will immediately remove all error messages from the entire form and reset the validation plugin to its initial state.
$('#clearform').on('click', function () {
$("#register_form").validate().resetForm(); // clear out the validation errors
});
Make sure the reset button is type="button" or type="reset" or it will trigger validation.
<input type="reset" id="clearform" value="reset form" />
Clear Errors DEMO: http://jsfiddle.net/P46gL/3/
Clearing out the field data
You can clear out the values of the fields by calling a JavaScript .reset() like this.
$('#clearform').on('click', function () {
var form = $("#register_form");
form.validate().resetForm(); // clear out the validation errors
form[0].reset(); // clear out the form data
});
Full Working DEMO: http://jsfiddle.net/P46gL/4/

$("#register_form")[0].reset();, form fields are getting clear, but error messages are not getting cleared.
to do this you can put one more line below it:
function clearInputForm(){
alert("");
var validator1 = $( "#register_form" ).validate();
validator1.resetForm();
$("#register_form")[0].reset();
$('.error').hide();
}
Although you should do this way:
$( document ).ready(function(){
var validator = $("#register_form").validate({
focusCleanup: true,
rules: {
// custom rules
},
messages: {
// custom messages
}
});
$('[type="reset"]').on('click', function(){
validator.resetForm();
});
});
You should put your validator.resetForm(); in the click event of reset button.

If nothing works then try this approach (specially for clearing data purpose):
1- Form html:
<input type='reset' class="button_grey resetForm" value='Reset'>
2- Jquery validate
// you can add error fields
var validator = $("#clearform").validate({
focusCleanup: true
});
3- Reset the form
$('[type="reset"]').on('click', function(){
$("#clearform").closest('form').find("input[type=text], textarea").val("");
$('input:checkbox').removeAttr('checked');
validator.resetForm();
return false;
});

All error messages will be cleared
$('.btn-reset').on('click', function () {
$( "label.error" ).remove();
});

parsley.js - manually display a message without having to validate

I want to display a parsley message in an else clause of my javascript code:
if ( ...is valid ) {
//do things
} else {
//display parsley error
}
I know that Parsley allows custom validators as documented here: http://parsleyjs.org/documentation.html#javascript
But I merely want to display the message until the field is modified. I could create a validator such as:
$( '#myInput' ).parsley( {
validators: {
alwaysFalse: function ( val ) {
return false;
}
}
, messages: {
myMessage: "Form is invalid"
}
});
But then how would I trigger this and only this validator? (There is another validator already attached)

your messages object should be a mirror of your validators object but with the messages to display.
messages: {
alwaysFalse: "Form is invalid"
}
and you could try
validators: {
alwaysFalse: function(val){
return false;
},
required: function ( val ) {
return false;
}
}
also
Warning : you must remove parsley-validate auto-binding code in your forms DOM to allow you to override the default processing and use Parsley purely from javascript.
it seems like what you really want this: http://parsleyjs.org/documentation.html#parsleyfield
check out parsley-error-container
the trigger should be $( '#myInput' ).parsley( 'validate' );
or not 100% sure on this but you should be able to call each one like this:
$( '#myInput' ).parsley('alwaysFalse');
and if they need inputs or data:
$( '#myInput' ).parsley('alwaysFalse','inputs','data');

How to destroy jQuery validation and any further attempts at submission?

I have the following code for the jQuery validation plugin.... basically on submit, I slide everything up & fade it out... the only problem is, if you're quick enough, you can submit the form multiple times. How can I make sure that any presses of the enter key on the input (or clicks on that submit button) will not submit further?
Basically what happens, is that the form will load up the url in the action attribute when no javascript is there, so purely unbinding doesn't work... (even if it did, I can always press enter / click fast enough to get it to do a couple more....)
jQuery('.desired').validate({
debug: true,
rules: {
email: {
required: true,
email: true
}
},
wrapper: "div",
messages: {
email: "Please enter a valid email address."
},
errorPlacement: function(error, element) {
error.hide().appendTo(element.parent()).hide().slideDown();
},
errorClass: 'help-text',
submitHandler: function(form) {
var $ = jQuery;
var url = $(form).attr('action');
var query = $(form).serialize();
$.ajax({
url: url,
type: "POST",
data: query,
success: function() {
$("<p class='help-jquery'><b>Thanks</b>")
.insertAfter(jQuery(form))
.css('height', function(i,h) {
$(this).hide()
return h;
});
// $(form).css('height', $(form).height());
$(form).slideUp('slow');
$(form).fadeOut({ queue: false, duration: 'slow' });
// $('.help-jquery').fadeIn('slow');
$('.help-jquery')
.css('opacity', 0)
.slideDown('fast')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
//$('.desired submit').click(function(){
//return false;
//});
},
error: function() {
console.log('Error: did not submit properly');
},
complete: function(e) {
//$('.desired').unbind('submit');
//e.preventDefault();
//return false;
}
});
},
success: function(error,element){
},
highlight: function(error){
// This empty function needs to be here for this to work
}
});

You're on the right track with unbind(), it solves half of your problem because it will effectively suppress validation on form submission.
To solve the second half, you only have to neuter the form's submit event after unbinding, by registering the appropriate handler:
$(form).unbind("submit").submit(function() {
return false;
});

Use a boolean variable, like this:
var didValidate = false;
if(!didValidate) {
jQuery('.desired').validate({
//... your code here
});
}
In your AJAX success function, set didValidate to true.

Have a variable that is 1 or 0. before you do any validation, check that the variable is equal to 0. If it isn't 0, do nothing. If it is, continue. Once the validation passes, set the variable to 1 so that the validation cannot occur again.

Use event namespaces:
The name following the '.' let's you target handlers more specifically.
This at the top of the submit handler:
$(form).bind('submit.temp_submit_hold', function(e){
e.preventDefault();
e.stopPropagation(); //added this in case the plugin's handler func uses bubbling
return false;
} );
This at the top of the complete callback for the ajax call:
$('.desired').unbind('submit.temp_submit_hold');
A little more explanation after seeing your comments in complete. The time to preventDefault is immediately after your onsubmit handler starts working. On complete is when you want to enable it again. So we bind a func that stops it with prevent default and then unbind it to toggle behavior. I also added stopPropagation in case the plugin uses delegation/bubbling.

Probably the simplest is to add something like this to your submithandler
submitHandler: function(form) {
var $ = jQuery;
if ( $.data(form, "submit") ) > "" return false;
$.data(form, "submit", "in progress");
// .. the rest of your handler
}
If you want to allow the form to submitted again later, remove the .data() on success.

Use the .destroy() method.
This question and its answers are quite old. So since that time, the developer has added a .destroy() method to detach the validation plugin from the form.
Destroys this instance of validator freeing up resources and unregistering events.
// Initialize the validation plugin on your form
var validator = $("#myform").validate();
// Remove validation from your form
validator.destroy();
// After this point `#myform` is back to its original state without validation.
https://jqueryvalidation.org/Validator.destroy/
To stop multiple submissions, disable the submit button within the plugin's submitHandler function. (The submitHandler only fires when the form is valid and you've already clicked the submit button.)
submitHandler: function(form) {
// validation & submit success, so disable submit button
$("#yourSubmitButton").prop('disabled', true);
// your ajax code here
return false;
}