{"id":1410,"date":"2022-08-30T15:16:18","date_gmt":"2022-08-30T15:16:18","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/15\/validating-select-box-with-jquery-validate-and-chosen-plugins-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:16:18","modified_gmt":"2022-08-30T15:16:18","slug":"validating-select-box-with-jquery-validate-and-chosen-plugins-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/validating-select-box-with-jquery-validate-and-chosen-plugins-collection-of-common-programming-errors\/","title":{"rendered":"Validating select box with jquery validate and chosen plugins-Collection of common programming errors"},"content":{"rendered":"

Try something like this instead.<\/p>\n

$(document).ready(function() {\n\n    \/\/ initialize the plugin on DOM ready\n    $(\"#producteditform\").validate({ \n        \/\/ all rules and options,\n        rules: {\n            nameedit: {\n                required: true,\n                maxlength:100\n            },\n            unitedit:{\n                required: true,\n            }\n        }\n    });\n\n    \/\/ test for valid form\n    $('#save').on('click' function() {\n        if($(\"#producteditform\").valid()) {\n            \/\/ do this on valid form\n        } else {\n            \/\/ do this on invalid form\n        }\n    });\n\n});\n<\/code><\/pre>\n
$('#producteditform').validate()<\/code> initializes the validate plugin on the form<\/code>.<\/p>\n
$('#producteditform').valid()<\/code> programmatically triggers an actual validation test and returns a true\/false<\/code> boolean value.<\/p>\n
Alternatively, since your event<\/code> is the form click<\/code> on submit<\/code> event, then you simply use the built-in submitHandler<\/code> callback function instead. (There is no need to create another click<\/code> handler.)<\/p>\n
$(document).ready(function() {\n\n    \/\/ initialize the plugin on DOM ready\n    $(\"#producteditform\").validate({ \n        \/\/ all rules and options,\n        rules: {\n            nameedit: {\n                required: true,\n                maxlength:100\n            },\n            unitedit:{\n                required: true,\n            }\n        },\n        submitHandler: function(form) {\n            \/\/ do this on valid form\n        }\n    });\n\n});\n<\/code><\/pre>\n
Full documentation:<\/strong><\/p>\n
http:\/\/docs.jquery.com\/Plugins\/Validation<\/p>\n
Until you show your HTML output instead of the PHP, here is a generic example of how to validate a select<\/code> element:<\/p>\n
http:\/\/jsfiddle.net\/6Dt7F\/<\/strong><\/p>\n
Important, the very first, or the default option<\/code> in the select<\/code> element must contain value=\"\"<\/code> or the required<\/code> rule will fail.<\/p>\n
\n    please choose...\n    option 1\n    option 2\n    option 3\n\n<\/code><\/pre>\n
EDIT<\/strong>:<\/p>\n
I still don’t have enough code to make a working demo. However, since the chosen<\/code> plugin is hiding the actual form elements, you’ll have to do the following…<\/p>\n
1) Target the actual form element that is going to get validated and pass the data, not the visual element created by chosen<\/code>.<\/p>\n
2) Enable jQuery Validate to work on hidden elements by setting ignore: []<\/code> option.<\/p>\n
Try this…<\/p>\n
$(document).ready(function () {\n\n    \/\/ initialize the plugin on DOM ready\n    $(\"#producteditform\").validate({ \n        \/\/ all rules and options,\n        ignore: [], \/\/<\/code><\/pre>\n
Originally posted 2013-11-15 09:10:35. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
Try something like this instead. $(document).ready(function() { \/\/ initialize the plugin on DOM ready $(“#producteditform”).validate({ \/\/ all rules and options, rules: { nameedit: { required: true, maxlength:100 }, unitedit:{ required: true, } } }); \/\/ test for valid form $(‘#save’).on(‘click’ function() { if($(“#producteditform”).valid()) { \/\/ do this on valid form } else { \/\/ do […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1410","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1410"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1410\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}