www.webdeveloper.com
Results 1 to 5 of 5

Thread: Form Validation Input Text and Checkboxes

  1. #1
    Join Date
    Aug 2007
    Posts
    27

    Form Validation Input Text and Checkboxes

    The form and javascript below works well for the input text boxes, but I cannot seem to integrate the validation for the one, single checkbox.

    Form code (minus some guts):
    Code:
    <form name="msgform" method="post" action="rma.php" enctype="multipart/form-data" onsubmit="return validate(msgform);" value="" /> 
            <div id="SignUp">
    <table width="560" cellspacing="0" cellpadding="5">
        <tr>
    	<td colspan="2" align="center">
    	</td>
        </tr>
        <tr>
          <td valign=top align=right>
            <font size="2">Date Requested</font>
          </td>
          <td align=left>
            <input type="text" name="date" class="box" id="date" value="" readonly="true">
          </td>
        <tr>
          <td valign=top align=right>
            <font size="2"><b style="color:red;">*</b> First Name</font>
          </td>
          <td align=left>
            <input type=text name="First Name">
          </td>
        </tr>
        <tr>
          <td valign=top align=right>
            <font size="2"><b style="color:red;">*</b> Last Name</font>
          </td>
          <td align=left>
            <input type=text name="Last Name">
          </td>
        </tr>
        <tr>
          <td valign=top align=right>
             <font size="2">Title</font>
          </td>
          <td align=left>
            <input type=text name="Title">
          </td>
        </tr>
        <tr>
          <td valign=top align=right>
             <font size="2"><b style="color:red;">*</b> Company</font>
          </td>
          <td align=left>
            <input type=text name="Company">
          </td>
        </tr>
        <tr>
          <td valign=top align=right>
             <font size="2"><b style="color:red;">*</b> Address 1</font>
          </td>
          <td align=left>
            <input type=text name="Address1">
          </td>
        </tr>
        <tr>
          <td valign=top align=right>
             <font size="2">Address 2</font>
          </td>
          <td align=left>
            <input type=text name="Address2">
          </td>
        </tr>
        <tr>
          <td valign=top align=right>
            <font size="2"><b style="color:red;">*</b> City</font>
          </td>
          <td align=left>
            <input type=text name="City">
          </td>
        </tr>
        <tr>
          <td valign=top align=right>
            <font size="2">State/Province (US/Canada)</font>
          </td>
          <td align=left>
              <input type=text name="State">
          </td>
        </tr>
        <tr>
          <td valign=top align=right>
            <font size="2">State/Province (Elsewhere)</font>
          </td>
          <td align=left>
            <input type=text name="StateElsewhere">
          </td>
        </tr>
        <tr>
          <td valign=top align=right>
            <font size="2"><b style="color:red;">*</b> Zip/Postal Code</font>
          </td>
          <td align=left>
            <input type=text name="Zip">
          </td>
        </tr>
        <tr>
          <td valign=top align=right>
            <font size="2"><b style="color:red;">*</b> Country</font>
          </td>
          <td align=left>
            <input type=text name="Country">
          </td>
        </tr>
        <tr>
          <td valign=top align=right>
             <font size="2"><b style="color:red;">*</b> Phone</font>
          </td>
          <td align=left>
            <input type=text name="Phone">
          </td>
        </tr>
        <tr>
          <td valign=top align=right>
             <font size="2">Fax</font>
          </td>
          <td align=left>
            <input type=text name="Fax">
          </td>
        </tr>
        <tr>
          <td valign=top align=right>
             <font size="2"><b style="color:red;">*</b> Email</font>
          </td>
          <td align=left>
            <input type=text name="formmail_mail_email">
          </td>
        </tr>
    
        <TR>
         
        </TR>
    </table>
    <hr />
    
    <table width="550" cellspacing="1" cellpadding="2">
      <tr>
        <td align="center" valign="top"><b>Item</b></td>
        <td valign="bottom"><b><font color="#FF0000">*</font>Return Qty</b></td>
        <td valign="bottom"><b><font color="#FF0000">*</font>Original PO #</b></td>
        <td valign="bottom"><b>Original Invoice #</b></td>
        <td valign="bottom"><b><font color="#FF0000">*</font>Part Number</b></td>
        
      </tr>
      <tr>
        <td valign="top" align="center"><b>1</b></td>
        <td valign="top"><input type="text" name="Return Quantity 1" size="10"></td>
        <td valign="top"><input type="text" name="Purchase Order 1"></td>
        <td valign="top"><input type="text" name="Invoice 1"></td>
        <td valign="top"><input type="text" name="Part Number 1" size="17"></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td valign="bottom" colspan="2"><b><font color="#FF0000">*</font>Reason for Return</b></td>
        <td valign="bottom" colspan="2"><b>Product Application</b></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="2"><textarea rows="3" name="Reason for Return 1" cols="30"></textarea></td>
        <td colspan="2"><textarea rows="3" name="productapp1" cols="30"></textarea></td>
      </tr>
      
      <tr>
        <td><b><font color="#FF0000">*</font></b> <input type="checkbox" name="terms" id="checkbox" value=""> <font size="1">By checking this box, I agree to [COMPANY'S] terms and conditions.</font>
      </tr>
    
     
      <tr>
        <td colspan="5" align="center"><input type="submit" name="Submit" value="Submit Request"><input type="reset" value="Reset"></td>
          </tr>
    </table>
    </div>
    </form>
    Javascript Validation
    Code:
    <script language="javascript">
    	function validate(frm) {
    		var inputFields = new Array("First Name" ,"Last Name" ,"Company" ,"Address1" ,"City" ,"Zip" ,"Country" ,"Phone" ,"formmail_mail_email" ,"Return Quantity 1" ,"Purchase Order 1" ,"Part Number 1" ,"Reason for Return 1");
    		var counter;
    		var name;
    		var msg = "Please complete the following fields:\n";
    		var badFields = "";
    		for (counter = 0; counter < inputFields.length; counter++) {
    			name = inputFields[counter];
    			if (frm.elements[name].value.length == 0) {
    				if (name == "formmail_mail_email") {
    					badFields = badFields + "  - Email \n";
    				} else {
    					badFields = badFields + "  - " + name + "\n";
    				}
    			}
    		}
    		if (badFields.length != 0) {
    			alert(msg + badFields);
    			return false;
    		}
    		if (frm.formmail_mail_email.value.length > 0) {
    			return emailCheck(frm.formmail_mail_email.value);
    		} else {
    			return true;
    		}
                if (frm.terms.checked) {
                      return true;
                } else {
    			alert('You must agree to the Terms and Conditions');
                      return false;
                }
                 
        
    	}
    
    	function emailCheck(emailStr) {
    		var emailPat=/^(.+)@(.+)$/;
    		var specialChars="\\(\\)<>@,;:\\\\\\\"\\.\\[\\]";
    		var validChars="\[^\\s" + specialChars + "\]";
    		var quotedUser="(\"[^\"]*\")";
    		var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/;
    		var atom=validChars + '+';
    		var word="(" + atom + "|" + quotedUser + ")";
    		var userPat=new RegExp("^" + word + "(\\." + word + ")*$");
    		var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$");
    		var matchArray=emailStr.match(emailPat);
    
    		if (matchArray==null) {
    			alert("Email address seems incorrect (check @ and .'s)");
    			return false;
    		}
    
    		var user=matchArray[1];
    		var domain=matchArray[2];
    
    		if (user.match(userPat)==null) {
        			alert("The username doesn't seem to be valid.");
    			return false;
    		}
    
    		var IPArray=domain.match(ipDomainPat);
    		if (IPArray!=null) {
    	  		for (var i=1;i<=4;i++) {
    			    if (IPArray[i]>255) {
    		        	alert("Destination IP address is invalid!");
    				return false;
    	 	   		}
        			}
        			return true;
    		}
    
    		var domainArray=domain.match(domainPat);
    		if (domainArray==null) {
    			alert("The domain name doesn't seem to be valid.");
        			return false;
    		}
    
    		var atomPat=new RegExp(atom,"g");
    		var domArr=domain.match(atomPat);
    		var len=domArr.length;
    		if (domArr[domArr.length-1].length<2 || domArr[domArr.length-1].length>3) {
    		   alert("The address must end in a three-letter domain, or two letter country.");
       			return false;
    		}
    
    		if (len<2) {
       			var errStr="This address is missing a hostname!";
    			alert(errStr);
       		return false;
    		}
    
     		return true;
    	}
    </script>
    Any idea?

    Thanks

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    As a general rule, don't use return true, use only return false. No matter the values returned, the return command inside a function will stop the code execution, so that when you insert a return true, the rest of the code will not be run. Don't worry: if you don't specify a return value, the function will return itself as value. From a Boolean point of view any other value returned, except false, null or 0, will be equivalent with true.
    Thus, instead of:
    Code:
    if (frm.formmail_mail_email.value.length > 0) {
    			return emailCheck(frm.formmail_mail_email.value);
    		} else {
    			return true; // here the code will stop anyway
    		}
                if (frm.terms.checked) {
                      return true;
                } else {
    			alert('You must agree to the Terms and Conditions');
                      return false;
                }
    Try:
    Code:
    if (frm.formmail_mail_email.value.length > 0) {
    			emailCheck(frm.formmail_mail_email.value);
    		} 
                if (!frm.terms.checked) {// if NOT
                      alert('You must agree to the Terms and Conditions');
                      return false;
                }
    You should probably change the emailCheck() function code accordingly
    Last edited by Kor; 07-21-2009 at 02:48 PM.

  3. #3
    Join Date
    Jul 2009
    Posts
    91
    Same warning applies as in the other post! By setting the value="" I think you may be breaking the checkbox. Take that out and the value will be "yes" if it is checked or "no" if not. You can then validated with the IF statement

  4. #4
    Join Date
    Aug 2007
    Posts
    27
    Quote Originally Posted by Kor View Post
    As a general rule, don't use return true, use only return false. No matter the values returned, the return command inside a function will stop the code execution, so that when you insert a return true, the rest of the code will not be run. Don't worry: if you don't specify a return value, the function will return itself as value. From a Boolean point of view any other value returned, except false, null or 0, will be equivalent with true.
    Thus, instead of:
    Code:
    if (frm.formmail_mail_email.value.length > 0) {
    			return emailCheck(frm.formmail_mail_email.value);
    		} else {
    			return true; // here the code will stop anyway
    		}
                if (frm.terms.checked) {
                      return true;
                } else {
    			alert('You must agree to the Terms and Conditions');
                      return false;
                }
    Try:
    Code:
    if (frm.formmail_mail_email.value.length > 0) {
    			emailCheck(frm.formmail_mail_email.value);
    		} 
                if (!frm.terms.checked) {// if NOT
                      alert('You must agree to the Terms and Conditions');
                      return false;
                }
    You should probably change the emailCheck() function code accordingly
    Doing what you suggested rendered the entire validation function invalid. Even the required input text boxes no longer worked.

    This shouldn't be that hard, but for some reason, it is...

  5. #5
    Join Date
    Aug 2007
    Posts
    27
    Bump back to the top. Still not having any luck.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles