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');
}
});

Running the Textarea Resizer jQuery plugin on a Textarea field generated from the X-Editable jQuery library

Add the jQuery TextareaResizer jquery.textarearesizer.js library that StackOverflow uses to a textarea form field that us used by the jQuery edit in place library X-Editable
I have a simple working demo of the Textarearesizer.js plugin here http://codepen.io/jasondavis/pen/KpWybW which adds a Drag Hanlde to a textarea field and lets you click and drag to resise it.
I then try to add that same JavaScript code to make it work on a Textarea field generated from X-Editable here on this JSFiddle: http://jsfiddle.net/jasondavis/xBB5x/8558/
X-Editable JavaScript:
$('#description').editable({
type: 'textarea',
url: '/post',
pk: 1,
inputclass: 'task_description resizable',
highlight: '#F1FFE7',
mode: 'inline', // inline | popup
placement: 'top',
title: 'Enter Task Description',
validate: function(value) {
if ($.trim(value) === '') {
return 'Task Description is Required';
}
},
params: function(params) {
//Addition params in addition to the default: pk, name, value
params.userId = 1;
params.projectId = projectTaskModal.cache.projectId;
params.taskId = projectTaskModal.cache.taskId;
return params;
},
success: function(response, newValue) {
if (!response.success) return response.msg;
}
});
Textarea Resizer JavaScript:
/* jQuery textarea resizer plugin usage for Textarea */
$(document).ready(function() {
$('textarea.resizable:not(.processed)').TextAreaResizer();
});
I don't get any error messages however the Textarea field does not run the resizer code.
On the JSFiddle demo http://jsfiddle.net/jasondavis/xBB5x/8558/ when you click teh Text, the Textarea is revealed.
I think it may have something to do with the Textarea not being visible when the $('textarea.resizable:not(.processed)').TextAreaResizer(); code is ran since X-Editable does not show the Textarea until after you click on the text.
I also tried to do this:
$('#description').on('init', function(e, editable) {
$('textarea.resizable:not(.processed)').TextAreaResizer();
});
which runs my callback code when the editable field is initialized

I got it figured out. MY Textarea generated by X-Editable was not being generated in the DOM until after my call to the TextareaReizer plugin.
The solution was to use this Event that is ran after the form textarea is shown in the DOM...
$('#description').on('shown', function(e, editable) {
$('textarea.resizable:not(.processed)').TextAreaResizer();
});
Final solution demo working here http://jsfiddle.net/jasondavis/xBB5x/8559/

jQuery partial invalid field scroll on form validation

Got a quick question about a form validation using jQuery. So I have huge-butt form, which is validated and submitted properly. The only problem I keep running into is that when I try to submit it, and the form is invalid, the window does not scroll to the invalid field. It tries to - the view sort of jumps about half an inch above the submit button and that's it - the invalid field is not actually shown on the page. In terms of the jQuery default settings on the validator, I have the following code:
$.extend($.validator, {
defaults: {
messages: {},
groups: {},
rules: {},
errorClass: "error",
validClass: "valid",
errorElement: "label",
focusInvalid: true,
errorContainer: $([]),
errorLabelContainer: $([]),
onsubmit: true,
ignore: ":hidden",
ignoreTitle: false,
}
When the validator runs, this is the focusInvalid() function definition:
focusInvalid: function() {
if ( this.settings.focusInvalid ) {
try {
$(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
.filter(":visible")
.focus()
// manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
.trigger("focusin");
} catch(e) {
// ignore IE throwing errors when focusing hidden elements
}
}
},
Finally, on form validation:
if ( validator.form() ) {
if ( validator.pendingRequest ) {
validator.formSubmitted = true;
return false;
}
return handle();
} else {
validator.focusInvalid();
return false;
}

focus isn't the correct function for scrolling the page to a particular element. You need scrollTop, or a similar function. There are several questions about this, I like this answer which includes a simple example, and even includes the alternative solution with animation.

Thanks guys! It was fixed by having the script add custom classes to the invalid forms and focusing on them. We tried scrollTop, but that didn't work at all, so we went with a focus scenario. The invalidHandler function code is below for anyone who's interested:
// invalidHandler to set focus to invalid controls
invalidHandler: function(event, validator) {
var $invalidElement = $(validator.errorList[0].element);
if ($invalidElement.hasClass('chosen-select')) {
$invalidElement.trigger('chosen:activate');
} else if ($invalidElement.siblings('ul.token-input-list').length > 0) {
var $inputToken = $invalidElement.siblings('ul.token-input-list').find('input');
$inputToken.focus();
}
}

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();
});

validating my ckeditor text area with jquery

I have a text area which I've used ckeditor on:
<form name="product_edit" action="products.php" method="post" id="edit_form" enctype="multipart/form-data">
<textarea name="products_description" wrap="soft" cols="75%" rows="20" id="products_description"></textarea>
Also after including jQuery I have the following to validate the form:
$(document).ready(function() {
$('#edit_form').submit(function() {
if ($('#products_description').val() == '') {
alert('Please include a product description.');
return false;
}
}); // end submit()
}); // end ready()
I also have a couple of other fields I validate which aren't included for brevity.
My problem is that while all the other fields work fine with that, the text area sometimes doesn't. If I type stuff in it sometimes doesn't recognize it and still pops up the alert. Then if I go back and click (I don't even have to type anything more) and try to submit it works.
Any guesses as to why?

Is this still an issue? If not, post your solution.
CKEeditor does not work like that, you don't get data like $('#products_description').val(). CKEditor doesn't use the textarea directly, it generates an iframe to use instead of it. To get the value, call CKEDITOR.instances.editor1.getData() where editor1 in your case might be products_description.

This worked for me while no description is added works fine but if you put some space it is considered as content.Please add required attribute for your textarea.
Please include jquery validator and jquery library.
$(document).ready(function() {
$('#edit_form').validate({
ignore: [],
rules: {
products_description: {
required: function()
{
CKEDITOR.instances.products_description.updateElement();
}
}
},
messages: {
products_description: "مطلوب"
},
/* use below section if required to place the error*/
errorPlacement: function(error, element)
{
if (element.attr("name") == "products_description")
{
error.insertAfter("#cke_description");
} else {
error.insertAfter(element);
}
}
});
});