Develop Reference

Make jQuery validator validate hidden inputs on submit [duplicate]

In the new version of jQuery validation plugin 1.9 by default validation of hidden fields ignored. I'm using CKEditor for textarea input field and it hides the field and replace it with iframe. The field is there, but validation disabled for hidden fields. With validation plugin version 1.8.1 everything works as expected.
So my question is how to enable validation for hidden fields with v1.9 validation plugin.
This setting doesn't work:
$.validator.setDefaults({ ignore: '' });

The plugin's author says you should use "square brackets without the quotes", []
http://bassistance.de/2011/10/07/release-validation-plugin-1-9-0/
Release: Validation Plugin 1.9.0:
"...Another change should make the setup of forms with hidden elements
easier, these are now ignored by default (option “ignore” has
“:hidden” now as default). In theory, this could break an existing
setup. In the unlikely case that it actually does, you can fix it by
setting the ignore-option to “[]” (square brackets without the
quotes)."
To change this setting for all forms:
$.validator.setDefaults({
ignore: [],
// any other default options and/or rules
});
(It is not required that .setDefaults() be within the document.ready function)
OR for one specific form:
$(document).ready(function() {
$('#myform').validate({
ignore: [],
// any other options and/or rules
});
});
EDIT:
See this answer for how to enable validation on some hidden fields but still ignore others.
EDIT 2:
Before leaving comments that "this does not work", keep in mind that the OP is simply asking about the jQuery Validate plugin and his question has nothing to do with how ASP.NET, MVC, or any other Microsoft framework can alter this plugin's normal expected behavior. If you're using a Microsoft framework, the default functioning of the jQuery Validate plugin is over-written by Microsoft's unobtrusive-validation plugin.
If you're struggling with the unobtrusive-validation plugin, then please refer to this answer instead: https://stackoverflow.com/a/11053251/594235

This worked for me, within an ASP.NET MVC3 site where I'd left the framework to setup unobtrusive validation etc., in case it's useful to anyone:
$("form").data("validator").settings.ignore = "";

Make sure to put
$.validator.setDefaults({ ignore: '' });
NOT inside $(document).ready

So I'm going to go a bit deeper in to why this doesn't work because I'm the kind of person that can't sleep at night without knowing haha. I'm using jQuery validate 1.10 and Microsoft jQuery Unobtrusive Validation 2.0.20710.0 which was published on 1/29/2013.
I started by searching for the setDefaults method in jQuery Validate and found it on line 261 of the unminified file. All this function really does is merge your json settings in to the existing $.validator.defaults which are initialized with the ignore property being set to ":hidden" along with the other defaults defined in jQuery Validate. So at this point we've overridden ignore. Now let's see where this defaults property is being referenced at.
When I traced through the code to see where $.validator.defaults is being referenced. I noticed that is was only being used by the constructor for a form validator, line 170 in jQuery validate unminified file.
// constructor for validator
$.validator = function( options, form ) {
this.settings = $.extend( true, {}, $.validator.defaults, options );
this.currentForm = form;
this.init();
};
At this point a validator will merge any default settings that were set and attach it to the form validator. When you look at the code that is doing the validating, highlighting, unhighlighting, etc they all use the validator.settings object to pull the ignore property. So we need to make sure if we are to set the ignore with the setDefaults method then it has to occur before the $("form").validate() is called.
If you're using Asp.net MVC and the unobtrusive plugin, then you'll realize after looking at the javascript that validate is called in document.ready. I've also called my setDefaults in the document.ready block which is going to execute after the scripts, jquery validate and unobtrusive because I've defined those scripts in the html before the one that has the call in it. So my call obviously had no impact on the default functionality of skipping hidden elements during validation. There is a couple of options here.
Option 1 - You could as Juan Mellado pointed out have the call outside of the document.ready which would execute as soon as the script has been loaded. I'm not sure about the timing of this since browsers are now capable of doing parallel script loading. If I'm just being over cautious then please correct me. Also, there's probably ways around this but for my needs I did not go down this path.
Option 2a - The safe bet in my eyes is to just replace the $.validator.setDefaults({ ignore: '' }); inside of the document.ready event with $("form").data("validator").settings.ignore = "";. This will modify the ignore property that is actually used by jQuery validate when doing each validation on your elements for the given form.
Options 2b - After looking in to the code a bit more you could also use $("form").validate().settings.ignore = ""; as a way of setting the ignore property. The reason is that when looking at the validate function it checks to see if a validator object has already been stored for the form element via the $.data() function. If it finds a validator object stored with the form element then it just returns the validator object instead of creating another one.

This worked for me within an ASP.NET site.
To enable validation on some hidden fields use this code
$("form").data("validator").settings.ignore = ":hidden:not(#myitem)";
To enable validation for all elements of form use this one
$("form").data("validator").settings.ignore = "";
Note that use them within $(document).ready(function() { })

Just added ignore: [] in the specific page for the specific form, this solution worked for me.
$("#form_name").validate({
ignore: [],
onkeyup: false,
rules: {
},
highlight:false,
});

This is working for me.
jQuery("#form_name").validate().settings.ignore = "";

The validation was working for me on form submission, but it wasn't doing the reactive event driven validation on input to the chosen select lists.
To fix this I added the following to manually trigger the jquery validation event that gets added by the library:
$(".chosen-select").each(function() {
$(this).chosen().on("change", function() {
$(this).parents(".form-group").find("select.form-control").trigger("focusout.validate");
});
});
jquery.validate will now add the .valid class to the underlying select list.
Caveat: This does require a consistent html pattern for your form inputs. In my case, each input filed is wrapped in a div.form-group, and each input has .form-control.

Just find the text ignore: ":hidden" in your jquery validation file and comment it.
After comment this it will never loss any hidden elements to validate...
Thanks

Why `readonly`, `disabled` and `required` in same input field text is not working properly?

I am using readonly, disabled and required property of input text field like this:
<input type="text" id="visitDate" name="visitdate" readonly="readonly" disabled="disabled" required="required" />
My problem is that two of three property i.e. disabled and readonly are working properly but required is not working. Submit button allows to submit even it is empty. But if I remove readonly form can't be submitted empty.
I use
readonly because I am using date picker and user are not allowed to
input date manual.
disabled because I want this input field disable at the beginning
required because use must select date from date picker so that date
will not be empty.

What actually happen is that by default(HTML Implementation of Validations), the validation in HTML will not fire if a field is read-only or disable.
The Reason to it is simple. If the field is empty with attribute disabled or read-only, and a required validation is applied, the form could not be valid at any time.
It seems like there is no direct and ethical solution to this, but the indirect solution could be:
i) Handeling key-up/key-down events so that input could not be added.
jQuery Code:
$('input').keypress(function(e) {
e.preventDefault();
});
ii) For disabling control, I would suggest not to add the datepicker to the element until you want. Later, you can add it using JS when needed(In your case, register datepicker on select list changed event).
Also, you can use Enable and Disable jQuery events if you are using jQuery UI Datepickers like below:
$("#txtSearch").datepicker("enable");
$("#txtSearch").datepicker("disable");
For further reading, you can have a look to this link. This is a discussion on Bootstrap validation, but it applies to pure HTML too.
Hope, this will help.

If an element is disabled, it is ignored in form validation.
From the WHATWG specification for HTML:
If an element is disabled, it is barred from constraint validation. (source)
You almost certainly don't actually want disabled here: you want the behaviour of readonly. From the section documenting that attribute:
The difference between disabled and readonly is that read-only controls can still function, whereas disabled controls generally do not function as controls until they are enabled. (source)
"Still functioning" includes validation, as well as things like the value being part of the data sent when the form is submitted.

MVC 5 - Validate a specific field on client-side

I want to populate a city/state drop down list based on the postal code a user types into a textbox. So when the text changes, I'm going to make an ajax call to retrieve the data. However, I only want to perform that ajax request for valid postal codes. The field already validates using the DataAnnotations.RegularExpression attribute and jquery.validate.unobtrusive validation library. I'm unclear on what can and can't be used from jquery.validate when using unobtrusive. I've looked at the unobtrusive code, but haven't gotten an understanding of it yet. So two questions:
Using javascript,
is there a way to force validation on a specific field, not the whole form?
is there a way to check whether a specific field is valid?

After digging around in the source code, I've come to these conclusions. First, the purpose of unobtrusive is to wire up the rules and messages, defined as data- attributes on the form elements by MVC, to jQuery.validation. It's for configuring/wiring up validation, not a complete wrapper around it, so when it comes to performing validation that is already set up, you don't have to worry about "circumventing", or not involving, unobtrusive.
So to answer the questions:
Yes, there are two ways. The Validator.element(element) function and the $.fn.valid() extension method. .valid actually calls Validator.element internally. The difference is .valid works on a jQuery which allows you to perform the validation on one or more fields (or the form itself). Validator.element performs validation on only a single element and requires you to have an instance of the validator object. Although the documentation states .validate() "validates the selected form", it actually appears to initialize validation for the form, and if it has already been called, it simply returns the validator for the form. So here are examples of two ways to validate an input (below #2).
Yes, but not without also performing the validation. Both of the methods from #1 return a boolean so you can use them to determine whether a field is valid. Unfortunately there doesn't appear to be anything exposed by the library that allows you to check the validation without, in effect, showing or hiding the validation message. You would have to get at and run the rule(s) for the field from your code, which may be possible, but my need didn't justify spending the time on it.
Example:
<form>
<input id="txtDemo" type="text"></input>
</form>
...
<script type="text/javascript">
$("#txtDemo").valid();
//or
//Get the form however it makes sense (probably not like this)
var validator = $("form").validate();
//Note: while .element can accept a selector,
//it will only work on the first item matching the selector.
validator.element("#txtDemo");
</script>

you can find if a single field is valid and trigger this validation this way:
$("#myform").validate().element("#elem1");
details here http://docs.jquery.com/Plugins/Validation/Validator/element#element

Use like this:
$('#Create').on('click', function () {
var form = $('#test').closest('form');
$(form).validate();
if (!$(form).valid()) {
return
} else {
// Bide the data
}
});
Hope it works for you

How to change an input's value so it will be passed on when submitting?

With jQuery 1.10.1, I have set the value of an input field as such:
$('.entry input').keyup(function () {
$('.target input').val(foo);
});
This works on the screen, but when the form is submitted, the value is lost or at least not recognized by PHP validation.
Chrome's inspector doesn't show a value at all:
The examples on http://api.jquery.com/val/ have the same behaviour, in the inspector, the updated value can't be seen.
So how can a submittable value be set via jQuery?

That's because of the disabled attribute.
Disabled inputs are not submitted to the server.
To fix this, remove the disabled attribute before submitting.

To follow up on SLaks' answer, you could enable the input on submit:
$('#myForm').submit(function() {
$(this).('.question input').removeAttr('disabled');
return true;
});

Instead of using a input type="text" you could use as input type="hidden" to store your data. hidden inputs are not visible to the user and are often used to pass data along in forms.

Make jquery validation check for new form elements, or manually add them

I'm using jQuery validation plugin to validate a form. when one thing is selected in a selectbox a new selectbox is added trough ajax. this new element has class required but when I try to submit, it is not validated.
I know this is because when the validation plugin is initialized on the form the classes are checked to see which validations will be necessary. When a new item is added it is not checked for any classes, or initialized at all for that matter.
Is there a way to add the selectbox to the validation after it is initialized, maybe reinit the validation making it use its previous settings but rechecking its elements?

You have a couple options here. In jquery.validate.js there is a rules plugin. You can use it like so:
$field.rules('add', {required: true }); // additional rules
The plugin uses the fields' form to figure out what validator should be associated with the field. Documentation here
If you want the validation rules to come from the data annotations it is a little more complicated. Let me know what you are going for.

Found the solution with a fresh look, i found out that my selectboxes all had the name of undefined because of a mis-capitalized varname. This means only the first selectbox got validated. $field.rules('add', {required: true }); was not necessary because the class required did take this time.