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.
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 … Read more
Within your click handler, the mistake is the .validate() method; it only initializes the plugin, it does not validate the form. To eliminate the need to have a submit button within the form, use .valid() to trigger a validation check… $(‘#btn’).on(‘click’, function() { $(“#form1”).valid(); }); jsFiddle Demo .validate() – to initialize the plugin (with options) … Read more
Similar to Chris’s $(“form”).validate({ rules: { DayOfBirth: { required: true }, MonthOfBirth: { required: true }, YearOfBirth: { required: true } }, groups: { DateofBirth: “DayOfBirth MonthOfBirth YearOfBirth” }, errorPlacement: function(error, element) { if (element.attr(“name”) == “DayOfBirth” || element.attr(“name”) == “MonthOfBirth” || element.attr(“name”) == “YearOfBirth”) error.insertAfter(“#YearOfBirth”); else error.insertAfter(element); } });
With the invalidHandler you can set focus to the first element that fails: $(“#form”).validate({ onfocusout: false, invalidHandler: function(form, validator) { var errors = validator.numberOfInvalids(); if (errors) { validator.errorList[0].element.focus(); } } });
Ahh validation plugin, always so tricky 🙁 First, I added id attributes to all the input boxes. Then, I made a change function for you: $(“input[name=”userAction”]”).change(function() { $(‘#signupFields’).toggle(); $(‘#loginFields’).toggle(); if ($(“input[name=”userAction”]:checked”).val() === “login”) { removeRules(signupRules); addRules(loginRules); } else { removeRules(loginRules); addRules(signupRules); } }); The add and remove functions look like this: function addRules(rulesObj){ for (var … Read more
Four hours later I finally stumbled across the answer. For some reason Chrome seems to have some inbuilt predilection to use US date formats where IE and FireFox are able to be sensible and use the regional settings on the OS. jQuery.validator.methods[“date”] = function (value, element) { return true; }
Just add the ignore rule and define the selector. In this example, the validation will ignore all elements that have the class=”ignore” $(“#myform”).validate({ ignore: “.ignore” })
For anyone else who stumbles upon this, validate supports ‘remote’ method, which may not have existed in 2010: https://jqueryvalidation.org/remote-method/ $(“#myform”).validate({ rules: { email: { required: true, email: true, remote: { url: “check-email.php”, type: “post”, data: { username: function() { return $(“#username”).val(); } } } } } });