Hi -
I am trying to figure out a way to enforce the validation included for
this form based on whether the user chooses "email" or "phone" as the
contact choice. Right now it is set to enforce validation on both.
Is there a way to link the drop-down choice to the correspondent
validation section while disabling validation for the other one?
here's what I presently have:
<html>
<head>
<title>Contact Form</title>
<link rel="stylesheet" type="text/css" href="/end.css" />
<script language="JavaScript1.2">
//Disable select-text script (IE4+, NS6+)
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
<script language="JavaScript">
<!--
/***********************************************
* Required field(s) validation
***********************************************/
function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("txtname", "txtemail", "txtphone",
"txtcountry");
// Enter field description to appear in the dialog box
var fieldDescription = Array("Full Name", "E-mail", "Phone Number",
"Country");
// dialog message
var alertMsg = "Please complete the following fields:\n";
var l_Msg = alertMsg.length;
for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text
== ""){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
}
}
}
if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
// -->
</script>
<script type="text/javascript">
/***********************************************
* Disable "Enter" key in Form script
***********************************************/
function handleEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ?
event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}
</script>
<script language = "Javascript">
/**
* DHTML phone number validation script.
*/
// Declaring required variables
var digits = "0123456789";
// non-digit characters which are allowed in phone numbers
var phoneNumberDelimiters = "()- ";
// characters which are allowed in international phone numbers
// (a leading + is OK)
var validWorldPhoneChars = phoneNumberDelimiters + "+";
// Minimum no of digits in an international phone no.
var minDigitsInIPhoneNumber = 10;
function isInteger(s)
{ var i;
for (i = 0; i < s.length; i++)
{
// Check that current character is number.
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
// All characters are numbers.
return true;
}
function stripCharsInBag(s, bag)
{ var i;
var returnString = "";
// Search through string's characters one by one.
// If character is not in bag, append to returnString.
for (i = 0; i < s.length; i++)
{
// Check that current character isn't whitespace.
var c = s.charAt(i);
if (bag.indexOf(c) == -1) returnString += c;
}
return returnString;
}
function checkInternationalPhone(strPhone){
s=stripCharsInBag(strPhone,validWorldPhoneChars);
return (isInteger(s) && s.length >= minDigitsInIPhoneNumber);
}
function Validatephone(){
var Phone=document.contact.txtphone
if ((Phone.value==null)||(Phone.value=="")){
alert("Please Enter your Phone Number")
Phone.focus()
return false
}
if (checkInternationalPhone(Phone.value)==false){
alert("Please Enter a Valid Phone Number")
Phone.value=""
Phone.focus()
return false
}
return true
}
</script>
<script language = "Javascript">
/**
* DHTML email validation script.
*/
function echeck(str) {
var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert("You have entered an invalid E-mail address")
return false
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 ||
str.indexOf(at)==lstr){
alert("You have entered an invalid E-mail address")
return false
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 ||
str.indexOf(dot)==lstr){
alert("You have entered an invalid E-mail address")
return false
}
if (str.indexOf(at,(lat+1))!=-1){
alert("You have entered an invalid E-mail address")
return false
}
if (str.substring(lat-1,lat)==dot ||
str.substring(lat+1,lat+2)==dot){
alert("You have entered an invalid E-mail address")
return false
}
if (str.indexOf(dot,(lat+2))==-1){
alert("You have entered an invalid E-mail address")
return false
}
if (str.indexOf(" ")!=-1){
alert("You have entered an invalid E-mail address")
return false
}
return true
}
function Validateemail(){
var emailID=document.contact.txtemail
if (echeck(emailID.value)==false){
emailID.value=""
emailID.focus()
return false
}
return true
}
</script>
<script language = "Javascript">
/**
* DHTML textbox character counter (IE4+) script.
*/
function taLimit() {
var taObj=event.srcElement;
if (taObj.value.length==taObj.maxLength*1) return false;
}
function taCount(visCnt) {
var taObj=event.srcElement;
if (taObj.value.length>taObj.maxLength*1)
taObj.value=taObj.value.substring(0,taObj.maxLengt h*1);
if (visCnt) visCnt.innerText=taObj.maxLength-taObj.value.length;
}
</script>
<style type="text/css">
..input {
background-color: #DEDEDE;
border: 1px solid;
border-top-color: #888888;
border-left-color: #888888;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
color: #1D2A40;
font-family: Verdana;
}
..input2 {
background-color: #DEDEDE;
border: 1px solid;
border-top-color: #888888;
border-left-color: #888888;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
color: #1D2A40;
font-family: Verdana;
}
body {
scrollbar-face-color: #2E343F;
scrollbar-shadow-color: #ACB2BC;
scrollbar-highlight-color: #ACB2BC;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #303642;
scrollbar-arrow-color: #ACB2BC;
}
</style>
</head>
<body bgcolor="#FFFFFF" body onload="" scroll="no"
style="overflow:hidden"><form id="contact" name="contact"
method="POST" action="/Scripts/submit.asp" onsubmit="return
formCheck(this);">
<script language=JavaScript>
<!--
//Disable right click script
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!docum ent.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document. onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontext menu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>
<p align="center"><font size="6" face="Arial, Helvetica,
sans-serif"><b><br>
<br>
</b></font></p>
<table width="64%" border="1" cellspacing="0" cellpadding="5"
align="center" bordercolor="#003366">
<tr>
<td nowrap><font size="6" face="Arial, Helvetica,
sans-serif"><font color="05394F"><b>Contact
Form</b></font><b><font
color="#FFFFFF">-------------------------</font><img src="logo.jpg"
width="131" height="47"></b></font></td>
</tr>
</table>
<div align="center">
<table border="0" cellpadding="0" style="border-collapse: collapse;
border: 1px outset #000000; background-color: #053951" width="64%"
id="table1" cellspacing="10">
<tr>
<td width="145" height="46"><b><br>
<font face="Arial, Helvetica, sans-serif"
color="#FFFFFF">Name:</font></b></td>
<td height="46" nowrap><br>
<input type="text" name="txtname" size="20" maxlength="50"
class="input" style="border: 1px outset #000000" onkeypress="return
handleEnter(this, event)"
onfocus="this.style.backgroundColor='#66FFFF';"
onblur="this.style.backgroundColor='#DEDEDE';">
<font color="#FFFFFF" size="1"><font face="Arial, Helvetica,
sans-serif">(Press
ENTER to move between fields)</font></font> </td>
</tr>
<tr>
<td width="145" nowrap height="27"><b><font face="Arial,
Helvetica, sans-serif" color="#FFFFFF"> Email
Address:</font></b></td>
<td height="27" nowrap>
<input type="text" name="txtemail" size="20" maxlength="50"
class="input" style="border: 1px outset #000000" onkeypress="return
handleEnter(this, event)"
onfocus="this.style.backgroundColor='#66FFFF';"
onblur="this.style.backgroundColor='#DEDEDE';" onChange="return
Validateemail()">
</td>
</tr>
<tr>
<td width="145" nowrap><b> <font face="Arial, Helvetica,
sans-serif" color="#FFFFFF">Phone
Number:</font></b></td>
<td nowrap> <font color="#FFFFFF">
<input type="text" name="txtphone" size="20" maxlength="50"
class="input" style="border: 1px outset #000000" onkeypress="return
handleEnter(this, event)"
onfocus="this.style.backgroundColor='#66FFFF';"
onblur="this.style.backgroundColor='#DEDEDE';" onChange="return
Validatephone()">
<font face="Arial, Helvetica, sans-serif" size="2"> <font
size="1">(Include
area/country code)</font></font></font></td>
</tr>
<tr>
<td width="145" nowrap><b><font color="#FFFFFF"> <font
face="Arial, Helvetica, sans-serif">Contact
me via:</font></font></b></td>
<td width="380" nowrap>
<select name="contact" class="input" onkeypress="return
handleEnter(this, event)"
onfocus="this.style.backgroundColor='#66FFFF';"
onblur="this.style.backgroundColor='#DEDEDE';">
<option selected>E-Mail</option>
<option>Phone</option>
</select>
</td>
</tr>
<tr>
<td width="145" align="left" valign="top" nowrap><b><font
face="Arial, Helvetica, sans-serif"
color="#FFFFFF"> Country:</font></b></td>
<td>
<input type="text" name="txtcountry" size="20" maxlength="30"
class="input" style="border: 1px outset #000000" onkeypress="return
handleEnter(this, event)"
onfocus="this.style.backgroundColor='#66FFFF';"
onblur="this.style.backgroundColor='#DEDEDE';">
<p> </p>
</td>
</tr>
<tr>
<td width="145" align="left" valign="top" nowrap
height="300"><b> <font face="Arial, Helvetica, sans-serif"
size="3" color="#FFFFFF">Question(s):</font></b></td>
<td height="213"> <p>
<textarea onkeypress="return taLimit()" onkeyup="return
taCount(myCounter)" rows="8" name="txtcomments" cols="39"
maxLength="255" class="input2"
onfocus="this.style.backgroundColor='#66FFFF';"
onblur="this.style.backgroundColor='#DEDEDE';"></textarea>
<font color="#FFFFFF" size="1" face="Arial, Helvetica,
sans-serif"><br>
</font> <font color="#FFFFFF" size="1" face="Arial,
Helvetica, sans-serif">You
have <B><SPAN id=myCounter>255</SPAN></B> characters
remaining for
your comments</font></p>
<p>
<input type="submit" value="Submit Form" class=large2
name="B1" style="border: 1px outset #000000; background-color:
#F2F2F2">
<input type="reset" value="Clear Fields" class=large2
name="B2" style="border: 1px outset #000000; background-color:
#F2F2F2">
</p>
<td width="91" height="22">
</table>
</div>
</form>
<script type="text/javascript"><!--
document.contact.txtname.focus();
//--></script>
</body>
</html>
