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.
