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 <
[email protected]> 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<[email protected]>
> 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 <[email protected]> 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.
> >
> >
>
