SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    All form fields but one are validating correctly

    Hi, there! I'm puzzled by an issue that I'm having. I'm doing some simple form validation, including requiring certain fields. Simple enough. Everything works as I'd like, except that the "Country" field is not validating (ie., the form is able to be submitted with a blank "Country" field, even though I'm trying to require that data be entered in that field).

    The code is below. It's a .mobi site, although I don't think that's part of the problem.

    Javascript code:
    Code:
    <script type="text/javascript" language="JavaScript">
    function validate()
    {
    var firstname = document.getElementById("FirstName").value;
    var lastname  = document.getElementById("LastName").value;
    var city = document.getElementById("City").value;
    var zip = document.getElementById("Postalcode").value;
    var country = document.getElementById("Country").value;
    var email = document.getElementById("Email").value;
    var email2 = document.getElementById("EmailConfirm").value;
    var phone = document.getElementById("Phone").value;
    var subject = document.getElementById("Subject").value;
    var question = document.getElementById("Question").value;
    var model = document.getElementById( "ModelNumber" ).value;
    
    if(firstname=='')
    	{
    		alert("First Name is required.");
    		document.getElementById("FirstName").focus();
    		return false;
    	}
    if(lastname=='')
    	{
    		alert("Last Name is required.");
    		document.getElementById("LastName").focus();
    		return false;
    	}
    if(city=='')
    	{
    		alert("City is required.");
    		document.getElementById("City").focus();
    		return false;
    	}
    if(zip=='')
    	{
    		alert("Postal Code is required.");
    		document.getElementById("Postalcode").focus();
    		return false;
    	}
    if(country=='')
    	{
    		alert("Country is required.");
    		document.getElementById("Postalcode").focus();
    		return false;
    	}
    if(email=='')
    	{
    		alert("Email address is required.");
    		document.getElementById("Email").focus();
    		return false;
    	}
    if(!isEmail(email))
    	{
    		alert("You must enter a valid email address.");
    		document.getElementById("Email").focus();
    		return false;
    	}
    if(email2=='')
    	{
    		alert("Confirmation of email address is required.");
    		document.getElementById("EmailConfirm").focus();
    		return false;
    	}
    if(!isEmail(email2))
    	{
    		alert("You must enter a valid email address.");
    		document.getElementById("EmailConfirm").focus();
    		return false;
    	}
    if(email!=email2)
    	{
    		alert("Email addresses must match.");
    		document.getElementById("EmailConfirm").focus();
    		return false;
    	}
    if(phone=='')
    	{
    		alert("Phone number is required.");
    		document.getElementById("Phone").focus();
    		return false;
    	}
    if(subject=='')
    	{
    		alert("Subject is required.");
    		return false;
    	}
    			
    if((document.form1.Subject.selectedIndex==1) && (document.form1.ModelNumber.value==''))
    {
    alert("Model Number is required.");
    return false;
    	 }
    	 
    if((document.form1.Subject.selectedIndex==2) && (document.form1.ModelNumber.value==''))
    {
    alert("Model Number is required.");
    return false;
    	 }
    
    if(question=='')
    	{
    		alert("Question is required.");
    		document.getElementById("Question").focus();
    		return false;
    	}
    var radio_choice = false;
    	for (counter = 0; counter < form1.status.length; counter++)
    		{
    				
    	// If a radio button has been selected it will return true
    	// (If not it will return false)
    		if (form1.status[counter].checked)
    		radio_choice = true; 
    		}
    				
    		   if (radio_choice == false )
    		  {
    			alert("Please select a Reason for contacting Mantis.");
    				document.getElementById("StatusCell").style.fontWeight="bold";
    				return false;
    		  }
    	}
    		
    function isEmail (strValue)
    	{   
    		 var objRegExp  = /^[a-z]\w*([.\-]\w+)*@[a-z]\w*([.\-]\w+)*\.[a-z]{2,3}$/i;
    		 return objRegExp.test(strValue);
    	}
    
    </script>
    <script type="text/javascript" language="javascript">
    <!--
    function check_subject()
    {
        var Subject = document.getElementById( "Subject" );
        var ModelNumberLabel = document.getElementById( "ModelNumberLabel" );
        var ModelNumber = document.getElementById( "ModelNumber" );
    
        var visibility = "";    
        if ( Subject.value == "Owners Manual Request" || Subject.value == "Parts Manual Request" )
        visibility = "visible";
        else
        visibility = "hidden";
        ModelNumberLabel.style.visibility = visibility;
        ModelNumber.style.visibility = visibility;
    }
    -->
    </script>
    HTML form code:
    HTML Code:
    <form name="form1" method="post" action="inquiries_submitted_international.asp" onsubmit="return validate();">
    <h2>Contact Us </h2>
    <img src="img/blackline_long.gif" alt="line" width="290" height="1"/>
    
    <p>If you are located outside of the continental United States, please submit your question below. We will respond within 1 to 2 business days. Fields marked with an asterisk (<span class="red">*</span>) are required. </p>
    
    <table width="310px" cellpadding="5" cellspacing="0" >
    <tr>
    <td width="88">
    <span id="FirstNameLabel">
    First Name: (<span style="color: Red;">*</span>)                    </span>                
    </td>
    
    <td width="200">
    <input name="FirstName" type="text" id="FirstName" class="contactFormFields" style="width:70%;" />                
    </td>
    </tr>
    <tr>
    <td>
    <span id="LastNameLabel">
    Last Name: (<span style="color: Red;">*</span>)                    </span>               
    </td>
    
    <td>
    <input name="LastName" type="text" id="LastName" class="contactFormFields" style="width:70%;" />                
    </td>
    </tr>
    <tr>
    <td>
    Company:                
    </td>
    <td>
    <input name="Company" type="text" id="Company" class="contactFormFields" style="width:70%;" />                
    </td>
    </tr>
    <tr>
    <td>
    <span id="CityLabel">City: (<span style="color: Red;">*</span>)</span>
    </td>
    <td>
    <input name="City" type="text" id="City" class="contactFormFields" style="width:70%;" />
    </td>
    </tr>
    <tr>
    <td>
    
    <span id="PostalcodeLabel">
    Postal Code: (<span style="color: Red;">*</span>)                    </span>                
    </td>
    <td>
    <input name="Postalcode" type="text" id="Postalcode" class="contactFormFields" style="width:70%;" />                
    </td>
    </tr>
    <tr>
    <td>
    
    <span id="Country">
    Country: (<span style="color: Red;">*</span>)                    </span>                
    </td>
    <td>
    <input name="Country" type="text" id="Country" class="contactFormFields" style="width:70%;" />                
    </td>
    </tr>
    <tr>
    <td>
    <span id="EmailLabel">
    Email: (<span style="color: Red;">*</span>)                    </span>                
    </td>
    <td>
    <input name="Email" type="text" id="Email" class="contactFormFields" style="width:70%;" />                
    </td>
    </tr>
    <tr>
    <td>
    <span id="EmailConfirmLabel">
    Confirm Email: (<span style="color: Red;">*</span>)                    </span>                
    </td>
    <td>
    <input name="EmailConfirm" type="text" id="EmailConfirm" class="contactFormFields" style="width:70%;" />                
    </td>
    </tr>
    <tr>
    <td>
    <span id="PhoneLabel">
    Phone: (<span style="color: Red;">*</span>)                    </span>                
    </td>
    <td>
    <input name="Phone" type="text" id="Phone" class="contactFormFields" style="width:70%;" />                
    </td>
    </tr>
    <tr>
    <td>
    Fax Number:                
    </td>
    <td>
    <input name="Fax" type="text" id="Fax" class="contactFormFields" style="width:70%;" />                
    </td>
    </tr>
    <tr>
    <td>
    Website (URL):                
    </td>
    <td>
    <input name="Website" type="text" id="Website" class="contactFormFields" style="width:70%;" />                
    </td>
    </tr>
    <tr>
    <td>
    <span id="SubjectLabel">
    Subject: (<span style="color: Red;">*</span>)                    </span>                
    </td>
    <td>
    <select name="Subject" id="Subject" onclick="javascript: check_subject();" onkeyup="javascript: check_subject();" style="width:70%;">
    	<option selected="selected" value="">Select One</option>
    	<option value="Owners Manual Request">Owners Manual Request</option>
    	<option value="Parts Manual Request">Parts Manual Request</option>
    	<option value="Other">Other</option>
    </select>
    </td>
    </tr>
    <tr>
    <td>
    <span id="ModelNumberLabel" style="visibility:hidden;">
    Model Number: (<span style="color: Red;">*</span>)                    </span>                
    </td>
    <td>
    <input name="ModelNumber" type="text" maxlength="15" id="ModelNumber" class="contactFormFields" style="width:70%;visibility:hidden;" />
    </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>
    If you have a question or issue on a specific piece of equipment, please be sure to reference the model and serial number so we may better serve you.                
    </td>
    </tr>
    <tr>
    <td valign="top">
    <span id="QuestionLabel">
    Question: (<span style="color: Red;">*</span>)                    </span>                
    </td>
    <td>
    <textarea name="Question" rows="7" cols="20" id="Question" class="contactFormFields" style="width:200;"></textarea>                
    </td>
    </tr>
    <tr>
    <td valign="top" id="StatusCell"><span id="StatusLabel"> Please check one: (<span style="color: Red;">*</span>) 
    </span>
    </td>
    <td>
    <input id="status" type="radio" name="status" value="1" />
    <label for="status1">I am a prospective Canadian dealer or distributor</label><br />
    <input id="status" type="radio" name="status" value="2" />
    <label for="status2">I am interested in purchasing your products</label>
    <br />
    <input id="status" type="radio" name="status" value="3" />
    <label for="status3">I am a current Canadian dealer or distributor</label>
    <br />
    <input id="status" type="radio" name="status" value="4" />
    <label for="status4">I currently own your product(s)</label>                </td>
    </tr>
    <tr>
    <td colspan="2" align="left" valign="top">
    <input type="submit" name="submit" value="Submit" id="submit" />
    <img src="img/spacer_1x3.gif" alt="spacer"  width="8" height="1"/>
    <input type="submit" name="cancel" value="Cancel" id="cancel" />                
    </td>
    </tr>
    </table>
    </form>
    Any help would be much appreciated. I can't see anything that I've done differently for the "Country" field versus the others.

    Thanks!

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My guess is because your document is invalid. You're using id="Country" for two elements (the input and a span). An ID must be unique within the page; you can't have two elements with the same ID. The document.getElementById() function returns a single Node, and it probably returns the first one it finds – which is the span element.

    (You also seem to intend to set focus to the postal code field if the country field is empty.)
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks! I'll take a look and see if I can get things resolved with your input.

  4. #4
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beautiful! I changed the first id (for the span) to "CountryLabel" as it should have been to begin with. All is well.

    I also fixed the focus issue that you mentioned.

    You're the best... Thanks for the reply!

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm glad you solved the problem. I thought it was a simple mistake, since you didn't have the same problem anywhere else. It's easy to fall into this trap; I've done it myself.
    Birnam wood is come to Dunsinane

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    One of the fun situations I've found in the past is where an identifier called "description" doesn't want to work, because there is a meta name of the same name in the header section. Puzzling and the cause for much hair loss. Thank you IE.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •