You should have ‘name’ attribute for your inputs. You need to add the rules dynamically, one option is to add them when the form submits. And here is my solution that I’ve tested and it works: <script type=”text/javascript”> $(document).ready(function() { var numberIncr = 1; // used to increment the name for the inputs function addInput() …
I just ran into this issue myself. Pulled my hair out for an hour, but here it is: Throw the “name” attribute in there as well and that may do the trick.
if you look at the “rules” section’s example code in the documentation page, there is a depends field you can set. something like the following (this is right off my head, not tested): … secondInput: { required: function(element){ return $(“#firstInput”).val()!=””; } } ….
Just add ignore: [], in Your form validation function. It will enable hidden field validation.So You will get validation for Select 2 $(“#ContactForm”).validate({ ignore: [], rules: { //Rules }, messages: { //messages } });
The unobtrusive library will attach the validator on all forms, so you have to replace the submitHandler this way: $(“form”).data(“validator”).settings.submitHandler = function (form) { alert(‘submit’); form.submit(); };
Instead of changing the source file jquery.validation you can simply override the function you need to edit only in the pages that requires it. An example would be: $.validator.prototype.checkForm = function() { //overriden in a specific page this.prepareForm(); for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) { if (this.findByName(elements[i].name).length !== undefined …
Use a custom error placement function (see the plugin’s options) that doesn’t append the error message to anything. $(‘#form’).validate({ errorPlacement: function(error,element) { return true; } }); Or you could put the error messages elsewhere on the page – say in a DIV at the top of the page.
the val function called from the select will return an array if its a multiple. $(‘select#my_multiselect’).val() will return an array of the values for the selected options – you dont need to loop through and get them yourself.
What you should use is the errorLabelContainer jQuery(function($) { var validator = $(‘#form’).validate({ rules: { first: { required: true }, second: { required: true } }, messages: {}, errorElement : ‘div’, errorLabelContainer: ‘.errorTxt’ }); }); .errorTxt{ border: 1px solid red; min-height: 20px; } <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.11.1.js”></script> <script type=”text/javascript” src=”http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js”></script> <script type=”text/javascript” src=”http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js”></script> <form id=”form” method=”post” …
You could use the submitHandler option. Basically put the $.ajax call inside this handler, i.e. invert it with the validation setup logic. $(‘#form’).validate({ … your validation rules come here, submitHandler: function(form) { $.ajax({ url: form.action, type: form.method, data: $(form).serialize(), success: function(response) { $(‘#answers’).html(response); } }); } }); The jQuery.validate plugin will invoke the submit handler …