We Keep Coding

Is checkbox validation with validate.js library broken?

I need to add client-side form validation to an HTML5 form. I don't want to hack my own solution and I'm not using Angular.
Since I'm using HTML5, the pattern and required attributes combined cover basic validation.
However, where custom validation is needed, for example, requiring a specific combination of checkboxes are ticked - I need something more.
A quick web search took me to The 10 Best JavaScript Libraries for Form Validation and Formatting.
I tested out Validate.js and hit a problem when validating checkboxes. Validate.js binds to specific form elements by name, e.g.
var validator = new FormValidator('example_form', [{
name: 'req',
rules: 'required'
});
The corresponding HTML form:
<form name="example_form">
<input name="req" />
</form>
I decided to apply this to a group of checkboxes AND implement my own custom rule (documented on Validate.js):
<form name="example_form">
<input type="checkbox" name="test" value="a">
<input type="checkbox" name="test" value="b">
<input type="checkbox" name="test" value="c">
</form>
Firstly, the Validator configuration object adding my custom rule:
var validator = new FormValidator('example_form', [{
name: 'test',
rules: 'callback_my_rule'
});
...notice the required rule (provided out-of-the-box) is gone, and has been replaced by my own rule callback_my_rule. Next I defined my_rule (as per the documentation, the callback_ prefix is dropped):
validator.registerCallback('my_rule', function(value) {
var atLeastOne = ($('[name="test"]:checked').length > 0);
return atLeastOne;
});
A return value of False means validation failed, whereas True is valid.
The problem is, if no checkboxes are ticked, my custom validation function, my_rule, is never called. Only when I tick a checkbox is the function called. It seems a unintuitive to only call custom validation functions when a checkbox is ticked.
The Validate.js documentation provides an example form with a checkbox, however, the checkbox validation function is omitted from the sample code:
However, the example form does validate the checkbox, digging around the source of Validate.js documentation, I see the checkbox uses the out-of-the-box required rule:
Questions
Has anyone got Validate.js working with checkboxes and custom
validation functions?
Is there a better library for custom form
validation?

I have tested Jquery Validation Plugin and works like a charm with checkbox!
DEMO LINK http://jsfiddle.net/K6Wvk/
$(document).ready(function () {
$('#formid').validate({ // initialize the plugin
rules: {
'inputname': {
required: true,
maxlength: 2
}
},
messages: {
'inputname': {
required: "You must check at least 1 box",
maxlength: "Check no more than {0} boxes"
}
}
});
});

jQuery Validate plugin not validating an element that's not a form input

I need to validate with jQuery Validation Plugin a combobox component: jqxComboBox. This component is applied on a div. So defining
<div id="component_id" />
$( "#component_id" ).jqxComboBox({...});
$("#component_id" ).rules( "add", {
required: true,
messages:{
required: "Field is required"
}
});
throws the following exception: Cannot read property 'nodeType' of undefined. I think it should due to the fact that I'm applying validation rules on a div.
This component generate an input type hidden to hold selected value. I have also tryed to apply validation rules on that hidden component, but this do not works: form is submitted also when hidden has no value.
$('input[type=hidden][name=myName]').rules( "add", {
required: true,
messages:{
required: "Field is required"
}
});
Can someone please give me some hints on how to solve this?

Quote OP:
"I need to validate with jQuery Validation Plugin a combobox component: jqxComboBox. This component is applied on a div."
As you learned, you cannot use jQuery Validate to validate a div. You can only validate input, select and textarea elements that are within a <form> container.
Quote OP:
"This component generate an input type hidden to hold selected value. I have also tryed to apply validation rules on that hidden component, but this do not works: form is submitted also when hidden has no value."
Putting the value inside a hidden input element is an acceptable workaround.
However, by default, the jQuery Validate plugin will ignore all hidden input elements. Simply change the ignore option to [] in order to ignore "nothing". Set the ignore option inside your .validate() call along with any/all of your other options.
$('#yourform').validate({
// your other options, rules and callbacks,
ignore: [] // <- ignore nothing - validate hidden elements
});
Documentation: http://jqueryvalidation.org/validate/#ignore

How can i show a validationMessage (for an input element) programmatically without a Form?

Im not sure if this is possible without using a form.
But I would like the browser to render the validation errors.
Again, I am doing this programmatically without a form.
i.e. No Form tag, and no submitting. Just straight-up scripting.
Updated
I would like to validate input fields, such as:
<input value="123" maxlength="5"/>
<input value="hllo wrld" spellcheck="true"/>

If you wan't to validate that fields on page load without any additional submit/click event this can be possible solution :
$( document ).ready(function() {
$("#fieldDiv input").each(function() {
if(!isNaN(this.value)) {
alert(this.value + " is a valid number");
}
});
});
Idea is to traverse all input fields and perfom validation. You can use custom attributes to know what validation to use.

jQuery Masked Input - Is it possible to retrieve the mask?

I'm using jQuery Masked Input Plugin with jQuery Validation Plugin. When a field of the form loses focus, the jQuery Validation Plugin shows a message but that's not happening to the fields that are bound to masks, perhaps because the blur event happens and verifies that the field is not empty, actually the field is filled out with the mask.
So I override the required method of the validation plugin so as to verify the mask too. Since I have telephones masks I cannot hard code a mask, I would have to call a method in the plugin that returns me the mask bound to the field. I didn't find the documentation of the masked input plugin and nobody with my problem.
Does anyone know if there's a method that return me the mask itself bound to the field?

I use a masked input for phone fields and verify that there is a phone number present with minlength like so:
...
phone: {
required: true,
minlength: 17
},
My mask looks like this:
+1 (XXX) XXX-XXXX

Given the way the plug-in ( jQuery Masked Input Plugin) is built Tomanow's approach is the way to go.
If the input size can only have the same amount of characters than the mask.
I would suggest this method :
Complementary plugin
(function($) {
$.fn.extend({
mask2: function(mask, settings){
//store in data
this.data('data-mask',mask);
this.data('data-maskLength', mask.length);
//add data attributes as html markups (optional)
this.attr('data-mask',mask);
this.attr('data-maskLength', mask.length);
// add validator rule (see section add custom method; i haven't test it yet you can remove it if necessary)
$( "#myinput" ).rules( "add", {
maskRule: true
});
// add original mask plugin
return this.mask(mask, settings);
}
});
})(jQuery);
Now instead of using mask you use mask2
$("#date").mask2("99/99/9999");
Add a custom Validation method
The easiest way is to use the data-maskLength key , (you may need to put this on top):
jQuery.validator.addMethod("maskRule", function(value, element, params) {
return value.length == element.data("data-maskLength");
}
I havent test the validation Method but at least you can retrieve the mask or its length
You can see what i did on JsFiddle

Custom form validation function on element with html 5

For a custom image selection tool I would like to create form validation based on html 5 form validation.
For example my form consists of the following elements:
<form class="cms-form" action="">
<table width="800">
<tr>
<td width="30%">Name:</td>
<td><input type="text" name="name" class="cms-input-text" maxlength="127" /></td>
</tr>
<tr>
<td>Image:</td>
<td><textarea name="icon" class="cms-input-file" data-file-resource="images" data-options="{"min":1,"max":3}">/location-to-image.png</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Next"/></td>
</tr>
</table>
</form>
I have a Javascript that changes the textarea (.cms-input-file) into some html to add images and hides the original textarea.
It looks something like this:
<textarea name="icon" class="cms-input-file" data-file-resource="images" data-options="{"min":1,"max":3}" style="display: none;">/location-to-image.png</textarea>
<ul class="cms-input-file-list">
<li class="cms-input-file-item" data-image="/location-to-image.png">
<img src="/location-to-thumb.png" alt="" class="cms-input-file-item-thumbnail"/>
<span class="cms-input-file-item-title">location to image</span>
</li>
<li class="cms-input-file-add">Add</li>
</ul>
Since I have allot of existing forms using html5 form validation I would like to validate this element using the default form validation within html5 supported browsers, but using a hopefully existing event.
I'm looking for something like this:
$('.cms-input-file').on('customValidateFunction', function () {
var options = $(this).data('options');
if($(this).find('> li.cms-input-file-item').length < options.min)
{
return [false, 'Add more images.'];
}
if($(this).find('> li.cms-input-file-item').length > options.max)
{
return [false, 'Remove some images.'];
}
return true;
});
Does anyone know if something like this is possible using default html 5 events or how would I go about adding this event to the submit event? To actually trigger the default browser validation look and feel.
-- edit --
So far I have made an attempt to get this result using a div element which hides the original element. But now I need to add a pattern to the element to match according to my options. Is this possible?
Current progress: http://jsfiddle.net/jeffreydev/YyEVu/

If I understand correctly what you need, I think you can achieve what you are trying to do using the pattern attribute of any input element.
I've created a very simple form in jsfiddle illustrating this.
The idea is that you update the value of your input with whatever data you have in your model when adding or removing images. The example, just adds one letter f per icon. Then, you can create a regex to match the expected valid results. In the example, pattern="f{1,3}" means that to be valid, the content can be "f", "ff", or "fff" but nothing else, which means that it'll only accept from one to three files to be sent.
You would be using just default html5 form validation, but you may need a bit of tweaking to get it working.
However, if you try this way, you should keep a couple of things in mind:
As explained in the specs, the patttern is compiled as a JavaScript regular expression with the global, ignoreCase, and multiline flags disabled
Setting the disabled property of your input so that the user can't change it would take it out of the form, and thus it won't be validated
Applying certain styles as *display:none" to the input element can cause errors when the validation fails and the browser tries to gain focus on the element.
I hope you this helps

You can install a submit handler on the <form>, and dispatch a custom event from there.
That will look something like this:
$('form.cms-form').on('submit', function(evt) {
var frm = $(this);
var allElements = $(this.elements);
$('#errors').empty();
var errors = [];
var arg = {
reportValidationError : function( msg ) {
errors.push(msg);
},
form : this
};
console.log("all elements: ", allElements);
allElements.trigger('customValidate', [ arg ]);
if( errors.length !== 0 ) {
showValidationErrors(errors);
return false;
}
return true;
});
Then, you can "hook" the customValidate event, and install your own logic...
$('textarea[name=icon]').on('customValidate', function(evt, reporter) {
var options = $(this).data('options');
// ... your validation here ...
// for example:
var txt = $(this).val();
if( txt.length < options.min || txt.length > options.max ) {
reporter.reportValidationError('error: "icon" min/max exceeded!');
}
})
Here's an example at jsFiddle.
Edit
You can style the error reporting, and tweak the code, to look and behave however you want it to. Here's an example.

A very good jquery plugin to validate your forms is Mike Alsup one's.
You will find it here: http://jquery.malsup.com/form/
It is documented, ajax compatible.
It can do serialization for one field or for all fields inside the form, so it is a big advantage regarding your problem you could need to handle fields validation and error logic with your forms.
You could add the blockUI plugin of the same author to enhance user's experience, and don't have to manage double submission of the form when javascript is enabled.
http://jquery.malsup.com/block/

Answer from 2022: Yes, it is possible without jQuery etc.
Most browsers support Constraint Validation API (even IE 11 according to "caniuse")
The recommended practice is to listen to input/submit events and then set validity flags on the input-box.
<form>
<input type="text" required id="answer">
<input type="submit">
</form>
Validation JS:
const nameInput = document.querySelector("#answer");
const form = document.querySelector("form");
function validate(e) {
if (nameInput.value == "42") { //correct!
nameInput.setCustomValidity(""); // empty means "no error"
}
else {
nameInput.setCustomValidity("Wrong answer!"); //show error text
e.preventDefault(); //prevent form submit
}
}
nameInput.addEventListener("input", validate);
form.addEventListener("submit", validate);
The input event fires even when the value is changed programmatically
P.S. Codepen to play with: https://codepen.io/jitbit/pen/XWYZjXO