Jump to content

jQuery descendant selector and form trouble


Dan06

Recommended Posts

I have a form with one nested fieldset, which contains legends and labels. I'm using jQuery to perform a form validation. The javascript code correctly performs the validation for all parts of the form EXCEPT the nest fieldset - the validation code, simply overlooks the nested fieldset code. Below is the code for my form and validation; if someone knows why the validation is not working with the nest fieldset please let me know. I think I'm not correctly using jQuery's descendant selector. Thanks.

 

<form name="Register" id="Register" class="registration" method="post" onsubmit="return Registration()" >
<fieldset>
<legend>Registration</legend>
<ol>
<li>
    	<label for="firstName">First Name<em>*</em></label><input type="text" name="firstName" id="firstName"/>
        <label class="error" for="firstName" id="firstNameError">This field is required.</label>
    </li>
    <li>
    	<label for="lastName">Last Name<em>*</em></label><input type="text" name="lastName" id="lastName" />
        <label class="error" for="lastName" id="lastNameError">This field is required.</label>
    </li>
    <fieldset>
    	<legend>Domestic or International?<em>*</em></legend>
        <label><input type="radio" name="joinType" id="domestic" value="domestic"/>Domestic</label>
        <label><input type="radio" name="joinType" id="international" value="international" />International</label>
        <label class="error" for="joinType" id="joinTypeError">This field is required.</label>
    </fieldset>
    <li>
    	<label for="email">Email<em>*</em></label><input type="text" name="email" id="email" />
        <label class="error" for="email" id="emailError">This field is required.</label>
    </li>
<center><p><input type="submit" name="signUp" value="Sign-Up"/></p></center>
</ol>
</fieldset>
<input type="hidden" name="type" value="Registration"/>
</form>

 

var interval = document.forms['Register'].elements['joinType'].length;
for (i=0; i<interval; i++){
	if(document.forms['Register'].elements['joinType'][i].checked){
		var joinType = document.forms['Register'].elements['joinType'][i].value;
	}
}
if (joinType == ""){
	$("label#joinTypeError").show();
	$("input#domestic").focus();
	return false;
}

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.