/    Sign up×
Community /Pin to ProfileBookmark

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>
[/CODE]

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>
[/CODE]

Any idea?

Thanks

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@KorJul 21.2009 — As a general rule, don't use[B] return true[/B], use only [B]return false[/B]. No matter the values returned, the [B]return[/B] command inside a function will stop the code execution, so that when you insert a [B]return true[/B], the rest of the code will not be run. Don't worry: if you don't specify a return value, the function [I]will return itself[/I] as value. From a Boolean point of view any other value returned, except false, null or 0, will be equivalent with [B]true[/B].

Thus, instead of:
<i>
</i>if (frm.formmail_mail_email.value.length &gt; 0) {
return emailCheck(frm.formmail_mail_email.value);
} else {
[COLOR="Red"]return true; // here the code will stop anyway[/COLOR]
}
if (frm.terms.checked) {
return true;
} else {
alert([COLOR="Blue"]'[/COLOR]You must agree to the Terms and Conditions');
return false;
}


Try:
<i>
</i>if (frm.formmail_mail_email.value.length &gt; 0) {
emailCheck(frm.formmail_mail_email.value);
}
if ([COLOR="Blue"]![/COLOR]frm.terms.checked) {[COLOR="Blue"]// if NOT[/COLOR]
alert('You must agree to the Terms and Conditions');
return false;
}


You should probably change the emailCheck() function code accordingly
Copy linkTweet thisAlerts:
@DaiLaughingJul 21.2009 — 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
Copy linkTweet thisAlerts:
@noboost4youauthorJul 22.2009 — As a general rule, don't use[B] return true[/B], use only [B]return false[/B]. No matter the values returned, the [B]return[/B] command inside a function will stop the code execution, so that when you insert a [B]return true[/B], the rest of the code will not be run. Don't worry: if you don't specify a return value, the function [I]will return itself[/I] as value. From a Boolean point of view any other value returned, except false, null or 0, will be equivalent with [B]true[/B].

Thus, instead of:
<i>
</i>if (frm.formmail_mail_email.value.length &gt; 0) {
return emailCheck(frm.formmail_mail_email.value);
} else {
[COLOR="Red"]return true; // here the code will stop anyway[/COLOR]
}
if (frm.terms.checked) {
return true;
} else {
alert([COLOR="Blue"]'[/COLOR]You must agree to the Terms and Conditions');
return false;
}


Try:
<i>
</i>if (frm.formmail_mail_email.value.length &gt; 0) {
emailCheck(frm.formmail_mail_email.value);
}
if ([COLOR="Blue"]![/COLOR]frm.terms.checked) {[COLOR="Blue"]// if NOT[/COLOR]
alert('You must agree to the Terms and Conditions');
return false;
}


You should probably change the emailCheck() function code accordingly[/QUOTE]


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...
Copy linkTweet thisAlerts:
@noboost4youauthorJul 31.2009 — Bump back to the top. Still not having any luck.
×

Success!

Help @noboost4you spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...