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