The reason I think $(".main-title form") will not work for my case is because my form is structured like the following:
<form class="cbnav" method="post" action="user/region.jsp"> <div class ="main-title">Kansas City (KC)</div> <div class="details"> </div> </form> So the form is actually a parent of the main-title div. But the main-title has nothing to do with the form, so I tried to move it out and up also, but that seemed to mess up the entire style of the form. Also - I call the validate when the main-title is clicked which is when the pop-up actually comes, so unless the user clicks on the main-title again and again the validate will not get called. I am very new to all this, so please let me know if I am talking nonsense. Thanks, Anoop On Tue, Jul 14, 2009 at 4:55 PM, Jörn Zaefferer < joern.zaeffe...@googlemail.com> wrote: > You shouldn't initialize the validation inside a click-event handler - > that way it tries to init it on every click. > > Why not just select the form and call validate, eg. > > $(".main-title form").validate({ ... }); > > Jörn > > On Tue, Jul 14, 2009 at 10:42 PM, Anoop kumar V<anoopkum...@gmail.com> > wrote: > > Hi All, > > > > I think I have been able to solve the issue of the validation error > messages > > not appearing on the correct form. If anyone else encounters the same > > problem, below is the fix / solution for it. (I had to use the event and > > firebug console). Changed lines are marked with a trailing //. > > > > $(function() { > > $('.main-title').click(function(event) { // > > $(event.target).parent().validate({ // > > rules: { > > regionid: > > { > > required: true, > > enter01: true > > }, > > regionname: "required", > > regionacronym: "required", > > regioncode: "required" > > }, > > messages: { > > regioncode: "Region Code can be 3 characters only" > > } > > }); > > }); > > }); > > > > I am still having the issue with the focus, when I click inside a field, > the > > cursor (to type) does not stay inside. > > > > Thanks, > > Anoop > > > > > > Thanks, > > Anoop > > > > > > On Tue, Jul 14, 2009 at 12:02 PM, anoop <anoopkum...@gmail.com> wrote: > >> > >> Hi, > >> > >> I am really new to jquery and have been using it for the past few > >> weeks. I have an issue that I am stuck in, would be grateful if > >> someone could assist a little. > >> > >> I use java / jsp for a small application of mine. The application > >> displays all regions as links on a page and for each region, I show a > >> form as a pop up (using jquery - hide / show). The form allows the > >> user to modify the information about the region, and for this it has a > >> few fields and a submit button. > >> > >> I am using the bassistance validation plugin for validating that the > >> user does not leave any field blank. > >> > >> The problem I am having is that the validation error messages are > >> displayed only on the first form and not on any other form on the > >> same. I have ensured that the forms do not have the same id. But all > >> forms have the same class which I am trying to make use of. > >> > >> I am thinking I need to get the index of the form and then call the > >> validate function on that form, but I am not sure if I am on the right > >> path. > >> > >> The js file contents are below: > >> *************************************** > >> $(function() { > >> $('.main-title').click(function(event) { > >> $('.details').hide(); > >> $(this).parent().children('.details').show(450); > >> event.stopPropagation(); > >> }); > >> }); > >> > >> $(function() { > >> $('.cls').click(function(event) { > >> $('.details').hide(); > >> event.stopPropagation(); > >> }); > >> }); > >> > >> jQuery.validator.addMethod( > >> "enter01", > >> function(value, element) { > >> if (element.value == "01") > >> { > >> return false; > >> } > >> else return true; > >> }, > >> "Already exists." > >> ); > >> > >> > >> $(function() { > >> $(this).form.validate({ // I also tried putting $ > >> (.cbnav).validate > >> rules: { > >> regionid: > >> { > >> required: true, > >> enter01: true > >> }, > >> regionname: "required", > >> regionacronym: "required", > >> regioncode: "required" > >> }, > >> messages: { > >> regioncode: "Region Code can be 3 characters only" > >> } > >> }); > >> }); > >> > >> *************************************** > >> > >> The html snippet is below - showing 2 forms > >> *************************************** > >> <form class="cbnav" action="user/region.jsp" method="post"> > >> <div class='main-title'>Washington DC</div> > >> > >> <div class="details"> > >> <div class="cls">close [x]</div> > >> <div class="form-class"> > >> <label for="regionid">Region Id > >> <input type="text" name="regionid" value="01" > >> size="2" readonly="readonly"/> > >> </label> > >> </div> > >> <div class="form-class"> > >> <label for="regionacronym">Region Acronym > >> <input type="text" name="regionacronym" > >> value="WAS" size="3"/> > >> > >> </label> > >> </div> > >> <div class="form-class"> > >> <label for="regionname">Region Name > >> <input type="text" name="regionname" > >> value="Washington DC" size="20"/> > >> </label> > >> </div> > >> <div class="form-class"> > >> <label for="regioncode">Region Code > >> <input type="text" name="regioncode" value="01" > >> size="2"/> > >> > >> </label> > >> </div> > >> <div class="form-class"><input type="submit" > >> value="Submit"/></div> > >> </div> > >> </form> > >> > >> > >> <form class="cbnav" action="user/region.jsp" method="post"> > >> <div class='main-title'>Atlanta </div> > >> <div class="details"> > >> > >> <div class="cls">close [x]</div> > >> <div class="form-class"> > >> <label for="regionid">Region Id > >> <input type="text" name="regionid" value="02" > >> size="2" readonly="readonly"/> > >> </label> > >> </div> > >> <div class="form-class"> > >> <label for="regionacronym">Region Acronym > >> <input type="text" name="regionacronym" > >> value="ATL" size="3"/> > >> > >> </label> > >> </div> > >> <div class="form-class"> > >> <label for="regionname">Region Name > >> <input type="text" name="regionname" > >> value="Atlanta" size="20"/> > >> </label> > >> </div> > >> <div class="form-class"> > >> <label for="regioncode">Region Code > >> <input type="text" name="regioncode" value="10" > >> size="2"/> > >> > >> </label> > >> </div> > >> <div class="form-class"><input type="submit" > >> value="Submit"/></div> > >> </div> > >> </form> > >> > >> *************************************** > >> > >> Also another issue I am facing (sort of related to this as even this > >> works only on the first form) is that in Firefox, when I click on the > >> input fields in the pop-up form, the focus does not stay. It works > >> fine in IE. I tried a lot of different options, by calling > >> ("input:text").focus() etc etc, but the focus would work only for the > >> first form fields and none other.I think the solution to both issues > >> will be similar. > >> > >> Thanks in advance. > > > > >