jquery-validate - w3toppers.com

jQuery Validate array input element which is created dynamically

Regarding your code for creating the new fields: // Mode 1 $(“#addInput”).on(‘click’, function () { $(‘#inputs’).append($(‘<input class=”comment” name=”name[]” />’)); }); The entire reason your “Mode 1” was not working is because you’ve assigned the same exact name attribute, name=”name[]”, to every single new input. The jQuery Validate plugin absolutely requires that every input element have … Read more

jQuery Validation Plugin – adding rules that apply to multiple fields

For the purposes of my example, this is the base starting code: HTML: <input type=”text” name=”field_1″ /> <input type=”text” name=”field_2″ /> <input type=”text” name=”field_3″ /> jQuery: $(‘#myForm’).validate({ rules: { field_1: { required: true, number: true }, field_2: { required: true, number: true }, field_3: { required: true, number: true } } }); http://jsfiddle.net/9W3F7 Option 1a) … Read more

jQuery Validate – require at least one field in a group to be filled

That’s an excellent solution Nathan. Thanks a lot. Here’s a way making the above code work, in case someone runs into trouble integrating it, like I did: Code inside the additional-methods.js file: jQuery.validator.addMethod(“require_from_group”, function(value, element, options) { …// Nathan’s code without any changes }, jQuery.format(“Please fill out at least {0} of these fields.”)); // “filone” … Read more

Bootstrap with jQuery Validation Plugin

for total compatibility with twitter bootstrap 3, I need to override some plugins methods: // override jquery validate plugin defaults $.validator.setDefaults({ highlight: function(element) { $(element).closest(‘.form-group’).addClass(‘has-error’); }, unhighlight: function(element) { $(element).closest(‘.form-group’).removeClass(‘has-error’); }, errorElement: ‘span’, errorClass: ‘help-block’, errorPlacement: function(error, element) { if(element.parent(‘.input-group’).length) { error.insertAfter(element.parent()); } else { error.insertAfter(element); } } }); See Example: http://jsfiddle.net/mapb_1990/hTPY7/7/

jquery.validate.unobtrusive not working with dynamic injected elements

I tried Xhalent’s approach but unfortunately it wasn’t working for me. Robin’s approach did work and didn’t work. It worked great for dynamically added elements, but if you tried to use JQuery to remove all the validation attributes and spans from the DOM, the validation library still would try to validate them. However, if you … Read more

jQuery Validation plugin: disable validation for specified submit buttons

You can add a CSS class of cancel to a submit button to suppress the validation e.g <input class=”cancel” type=”submit” value=”Save” /> See the jQuery Validator documentation of this feature here: Skipping validation on submit EDIT: The above technique has been deprecated and replaced with the formnovalidate attribute. <input formnovalidate=”formnovalidate” type=”submit” value=”Save” />

jQuery validation: change default error message

Add this code in a separate file/script included after the validation plugin to override the messages, edit at will 🙂 jQuery.extend(jQuery.validator.messages, { required: “This field is required.”, remote: “Please fix this field.”, email: “Please enter a valid email address.”, url: “Please enter a valid URL.”, date: “Please enter a valid date.”, dateISO: “Please enter a … Read more

Validate that end date is greater than start date with jQuery

Just expanding off fusions answer. this extension method works using the jQuery validate plugin. It will validate dates and numbers jQuery.validator.addMethod(“greaterThan”, function(value, element, params) { if (!/Invalid|NaN/.test(new Date(value))) { return new Date(value) > new Date($(params).val()); } return isNaN(value) && isNaN($(params).val()) || (Number(value) > Number($(params).val())); },’Must be greater than {0}.’); To use it: $(“#EndDate”).rules(‘add’, { greaterThan: … Read more

jQuery validate: How to add a rule for regular expression validation?

Thanks to the answer of redsquare I added a method like this: $.validator.addMethod( “regex”, function(value, element, regexp) { var re = new RegExp(regexp); return this.optional(element) || re.test(value); }, “Please check your input.” ); Now all you need to do to validate against any regex is this: $(“#Textbox”).rules(“add”, { regex: “^[a-zA-Z’.\\s]{1,40}$” }) Additionally, it looks like … Read more