{"id":3285,"date":"2011-03-14T01:58:36","date_gmt":"2011-03-13T20:28:36","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=3285"},"modified":"2011-03-14T02:26:08","modified_gmt":"2011-03-13T20:56:08","slug":"simple-client-side-ajax-validation","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/simple-client-side-ajax-validation\/","title":{"rendered":"Simple Client Side Ajax Validation"},"content":{"rendered":"
Well my second month into work and I have started discovering things that are very trivial, but can save you a whole lot of time .. if you could get to know them better .<\/div>\n
One of those things was with jQuery.<\/div>\n
Now working with a normal submit form, a jQuery Validate Plugin<\/strong> works superbly. You simply give<\/div>\n
“class = required <\/strong>“<\/div>\n
and it does the job.<\/div>\n

But when do the same with an Ajax call .. the Ajax call goes out without a validation.. which is what you don’t want. The call should only go out if the validation passes . Now faced with this I started to write a custom method … but on some reading up, found out that there actually exists a way to do this through the Plugin itself.<\/p>\n

The .form()<\/strong> method coupled with a .validate<\/strong> gives you a Boolean value i.e true if validated or false if not.<\/div>\n

Something like<\/p>\n

<\/span><\/p>\n

[javascript]
\nfunction validateForm() {
\n.
\n.
\n if ($(‘#form’).validate().form()) {
\n \/\/ (Put your Ajax Call here)
\n }
\n}
\n[\/javascript]<\/p>\n

In this way the Ajax call went out only if the .validate().form()<\/strong> returned true.<\/div>\n
Another usecase where I used it was when the whole form was when the whole form went through an Ajax call.<\/div>\n
I used a <g:formRemote><\/strong> tag . Now it doesn’t have a ‘onSubmit<\/strong>‘ of the normal form but it does have a ‘before<\/strong>‘ attribute that works somewhat similarly.<\/div>\n
So now,<\/div>\n

[html]
\n<g:formRemote name="searchPage" id="searchPage" url="${[controller:’eventInstance’,action:’executeSearch’]}" update="searchUpdate" before="return validateSearchForm()">
\n.
\n.
\n<\/g:formRemote>
\n[\/html]<\/p>\n

With a Javascript function<\/p>\n

[javascript]
\nfunction validateSearchForm() {
\n if ($(‘#searchPage’).validate().form() && checkDate()) {
\n return true;
\n }
\n else {
\n return false;
\n }
\n }
\n[\/javascript]<\/p>\n

So in this way the page would be Ajaxified if both of those methods returned true …<\/p>\n

Hope this helps ..<\/p>\n

Manoj Mohan
\nManoj (at) Intelligrape (dot) com<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Well my second month into work and I have started discovering things that are very trivial, but can save you a whole lot of time .. if you could get to know them better . One of those things was with jQuery. Now working with a normal submit form, a jQuery Validate Plugin works superbly. […]<\/p>\n","protected":false},"author":32,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1},"categories":[7],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/3285"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=3285"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/3285\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=3285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=3285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=3285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}