{"id":21,"date":"2009-05-27T11:43:00","date_gmt":"2009-05-27T11:43:00","guid":{"rendered":"http:\/\/www.codeboss.in\/web-funda\/?p=21"},"modified":"2009-05-27T11:43:00","modified_gmt":"2009-05-27T11:43:00","slug":"jquery-validation-for-array-of-input-elements","status":"publish","type":"post","link":"https:\/\/codeboss.in\/web-funda\/2009\/05\/27\/jquery-validation-for-array-of-input-elements\/","title":{"rendered":"JQuery Validation for Array of Input Elements"},"content":{"rendered":"<p>Sometimes we need to validate an array of input elements: For example &#8211; <\/p>\n<pre class=\"brush: html;\">\n<form name=\"signupForm\" class=\"cmxform\" id=\"signupForm\" method=\"get\" action=\"\">\n<select name=\"category[]\" id=\"cat_1\">\n<option value=\"\">Select One<\/option>\n<option value=\"1\">aa<\/option>\n<option value=\"2\">bb<\/option>\n<option value=\"3\">cc<\/option>\n<option value=\"4\">dd<\/option>\n<\/select>\n\n<select name=\"category[]\" id=\"cat_2\">\n<option value=\"\">Select One<\/option>\n<option value=\"5\">ee<\/option>\n<option value=\"6\">ff<\/option>\n<option value=\"7\">gg<\/option>\n<option value=\"8\">hh<\/option>\n<\/select>\n\n<select name=\"category[]\" id=\"cat_3\">\n<option value=\"\">Select One<\/option>\n<option value=\"9\">ii<\/option>\n<option value=\"10\">jj<\/option>\n<option value=\"11\">kk<\/option>\n<option value=\"12\">ll<\/option>\n<\/select>\n\n<input class=\"submit\" type=\"submit\" value=\"Submit\"\/>\n<\/form>\n<\/pre>\n<p>Now we will use jquery validation plugin jquery.validate.js for validating the form. The condition will be that user will have to choose category from each dropdown. The script for validation will be as below &#8211;<\/p>\n<pre class=\"brush: html;\">\n<script type=\"text\/javascript\" src=\"jquery.js\"><\/script>\n<script type=\"text\/javascript\" src=\"jquery.validate.js\"><\/script>\n<script type=\"text\/javascript\">\n$().ready(function() {\n\/\/ validate the comment form when it is submitted\n$(\"#signupForm\").validate({\nrules: {\n\"category[]\": \"required\"\n},\nmessages: {\n\"category[]\": \"Please select category\",\n}\n});\n});\n<\/script>\n<\/pre>\n<p>Now the problem is that the readymade jquery.validate.js only validates the first element of category[]. So, we need to modify it a little bit.<\/p>\n<p>In jquery.validate.js, we can find a function named checkForm, we have to modify it as below:<\/p>\n<pre class=\"brush: jscript;\">\n\ncheckForm: function() {\nthis.prepareForm();\nfor ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {\nif (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {\nfor (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {\nthis.check( this.findByName( elements[i].name )[cnt] );\n}\n} else {\nthis.check( elements[i] );\n}\n}\nreturn this.valid();\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes we need to validate an array of input elements: For example &#8211; Select One aa bb cc dd Select One ee ff gg hh Select One ii jj kk ll Now we will use jquery validation plugin jquery.validate.js for validating the form. The condition will be that user will have to choose category from&hellip; <a class=\"more-link\" href=\"https:\/\/codeboss.in\/web-funda\/2009\/05\/27\/jquery-validation-for-array-of-input-elements\/\">Continue reading <span class=\"screen-reader-text\">JQuery Validation for Array of Input Elements<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,16],"tags":[51,53],"class_list":["post-21","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery","tag-javascript-2","tag-jquery-2","entry"],"_links":{"self":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":0,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"wp:attachment":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}