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.
>
>
