"Either/or" dual-form field validation [Archive]

robincham

03-06-2004, 02:25 PM

Seeking simple JS for validating dual formfield combinations. For example, if either an "email" radio button or a "phone" radio button is checked, then there must be a corresponding entry in either an "email" or "phone" text field.

96turnerri

03-06-2004, 02:49 PM

this should help you out

if (document.quotation.Domain[0].checked) {
if (document.quotation.DomainName.value.length < 12) {
alert ("Please Enter An Example Of A Domain Name You Would Like");
document.quotation.DomainName.focus();
return false;
}
}

steelersfan88

03-06-2004, 03:11 PM

or:if(document.myForm.theType[0].checked) {
if(document.myForm.theEmail.value == "") {
alert("Bad input")
document.myForm.theEmail.focus()
}
}
else if(document.myForm.theType[1].checked) {
if(document.myForm.thePhone.value == "") {
alert("Bad input")
document.myForm.thePhone.focus()
}
}
else {
alert("No selection")
}

steelersfan88

03-06-2004, 03:17 PM

Here's a complete script:<form name="myForm">
<input type="radio" name="theType" value="Email">Email<BR>
<input type="radio" name="theType" value="Phone">Phone<BR>

Email: <input name="theEmail"><BR>
Phone: <input name="thePhone"><BR>

<input type="button" value="Check" onclick="checkVals()">
</form>

<script>

function checkVals() {
var msg = "Values OK"
if(document.myForm.theType[0].checked) {
if(document.myForm.theEmail.value == "") {
msg = "No Email Address Given"
document.myForm.theEmail.focus()
}
}
else if(document.myForm.theType[1].checked) {
if(document.myForm.thePhone.value == "") {
msg = "No Phone Number Given"
document.myForm.thePhone.focus()
}
}
else {
msg = "No Selection Made"
}
alert(msg)
}

</script>

robincham

03-06-2004, 04:41 PM

Tried script in previous thread reply, and am almost there. How do I tie onclick validation to Submit button already developed and tied to other validation scripts? And, how to force user to choose only one button (other than asking nicely and hoping for compliance)?

robincham

steelersfan88

03-06-2004, 05:00 PM

How do I tie onclick validation to Submit button already developedTry this, this uses the onsubmit method instead of onclick:<form name="myForm" onsubmit="return checkVals()">
<input type="radio" name="theType" value="Email" checked>Email<BR>
<input type="radio" name="theType" value="Phone">Phone<BR>

Email: <input name="theEmail"><BR>
Phone: <input name="thePhone"><BR>

<input type="submit" value="Submit!">
</form>

<script>

function checkVals() {
var msg = ""
if(document.myForm.theType[0].checked) {
if(document.myForm.theEmail.value == "") {
msg = "No Email Address Given"
document.myForm.theEmail.focus()
}
}
else if(document.myForm.theType[1].checked) {
if(document.myForm.thePhone.value == "") {
msg = "No Phone Number Given"
document.myForm.thePhone.focus()
}
}
else {
msg = "No Selection Made"
}
if(msg != "") {
alert(msg)
return false;
}
else {
alert("Everything OK!")
return true;
}
}

</script>Note: You may want to move the script into the head section of your code.tied to other validation scripts?This script will tie it into the onsubmit methodand allow more validation scripts. Try the following:<form name="myForm" onsubmit="return checkAllVals()">
<input type="radio" name="theType" value="Email" checked>Email<BR>
<input type="radio" name="theType" value="Phone">Phone<BR>

Email: <input name="theEmail"><BR>
Phone: <input name="thePhone"><BR>

<input type="submit" value="Submit!">
</form>

<script type="text/javascript">

function checkAllVals() {
var check = new Array
check[0] = checkVals()
check[1] = checkOtherVals()
// .... (replace the ^^ with names of validation functions)

var theCon = ""

for(var i=0;i<check.length;i++) {
theCon += check[i]
if(i != check.length - 1) {
theCon += " && "
}

}
if(!eval(theCon)) {
return false;
}

return true;
}

</script> And, how to force user to choose only one button (other than asking nicely and hoping for compliance)?Why don't you have one selected, as the scripts above illustrate!

robincham

03-06-2004, 05:46 PM

OK, OK . . . rather than scramble my precarious script further, here's the JS to date, following your earlier suggestion(s).

<html>
<head>
<title>Contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="Styles/HGSstyle.css" type="text/css">
<script language="JavaScript" type="text/javascript">
function checkVals() {
var msg = ""
if(document.myForm.radiobuttone.checked) {
if(document.myForm.email.value == "") {
msg = "Since you checked the Email button, please fill in your email address"
document.myForm.email.focus()
}
}
else if(document.myForm.radiobuttonp.checked) {
if(document.myForm.Phone.value == "") {
msg = "Since you checked the Phone button, please fill in your phone number"
document.myForm.Phone.focus()
}
}
else {
msg = "Please fill in the appropriate information"
}
if(msg != "") {
alert(msg)
return false;
}
else {
alert("Thanks for your inquiry. Click 'OK' to submit")
return true;
}
}

function checkCR(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = checkCR;
function placeFocus() {
if (document.forms.length > 0) {
var field = document.forms[0];
for (i = 0; i < field.length; i++) {
if ((field.elements[i].type == "text") || (field.elements[i].type == "textarea") || (field.elements[i].type.toString().charAt(0) == "s")) {
document.forms[0].elements[i].focus();
break;
}
}
}
}

</script>
</head>
<body bgcolor="#Fdeed0" text="#000000" OnLoad="placeFocus()">
<h3><b><font size="2" color="#990000">Use this form to book a trip with HGS. </font></b></h3>
<form name="Contact" method="post" action="http://www.hform.com/handler.cgi?1184868" onSubmit="return checkVals()">
<table width="540" border="0">
<tr>
<td width="38" height="34">
<h3>Name</h3>
</td>
<td width="492" height="34">
<h3>
<input type="text" name="Name" size="65">
</h3>
</td>
</tr>
</table>
<table width="541" border="0">
<tr>
<td width="37" height="31">
<h3>Email</h3>
</td>
<td width="494" height="31">
<h3>
<input type="text" name="email" size="45" maxlength="45">
</h3>
</td>
</tr>
</table>
<table width="500" border="0">
<tr>
<td width="124" height="31">
<h3>Phone <font size="-2">  (123-456-7890)</font></h3>
</td>
<td width="366" height="31">
<h3>
<input type="text" name="Phone" size="12" maxlength="12">
</h3>
</td>
</tr>
</table>
<table width="545" border="0">
<tr>
<td width="539">
<h3>How should I contact you? (Pick only one)
<input type="radio" name="radiobuttonp" value="phone">
Phone
<input type="radio" name="radiobuttone" value="email">
Email<br>
<br>
Use this space to tell me when you'd like to come to Montana, which
rivers you'd like<br>
to fish, and anything else I need to know to help you plan your trip.</h3>
</td>
</tr>
</table>
<table width="496" border="0" height="145">
<tr>
<td width="389" height="183" align="left" valign="top">
<h3>
<textarea name="requiredMessage" wrap="VIRTUAL" cols="45" rows="15"></textarea>
</h3>
</td>
<td width="97" height="183" align="left" valign="top">
<h3><b><font size="2" color="#990000">
<input type="submit" name="Submit" value="Submit">
<br>
<br>
</font></b><b><font size="2" color="#990000">
<input type="reset" name="Reset" value="Reset">
</font></b></h3>
<h3><b><font size="2" color="#990000">Thanks for your interest. I'll contact
you as soon as possible.</font></b> <b><font size="2" color="#990000">
</font></b></h3>
<h3><b><font size="2" color="#990000"> <i><a href="index.htm" target="_top"><font size="-2" color="#990000">Back</font></a></i><br>
<br>
<br>
<br>
<br>
</font></b></h3>
</td>
</tr>
</table>
</form>
</body>
</html>

As you see, there's JS to place the cursor in the first field and JS to disallow a return key punch from submitting the form, all coupled with your original suggestions. I can't seem to keep the buttons from both being selected. Pity a poor learner and continue suggestions.

robincham

Paul Jr

03-06-2004, 05:50 PM

Originally posted by robincham
I can't seem to keep the buttons from both being selected. Pity a poor learner and continue suggestions.

robincham
You are refering to the radio buttons, yes? If so, they both need to have the same name, if you want one or the other checked, but not both.

robincham

03-07-2004, 07:24 PM

SteelersFan88, Paul Jr.:

Thanks for the tips and schooling. All works well, as you both probably expected.

One other item - Is there a way to offer a form-filer one last chance to check their entries before they submit? I'm thinking of a small window opening when they first hit "submit," asking if they "did it right."

Ideas welcome.

robincham

steelersfan88

03-07-2004, 09:04 PM

You could keep a global variable in the script, and do something like this:<html>
<head>
<title>Contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="Styles/HGSstyle.css" type="text/css">
<script language="JavaScript" type="text/javascript">

var isOk = 0

function checkVals() {
var msg = ""
if(document.myForm.Contact_Type[0].checked) {
if(document.myForm.Email_Address.value == "") {
msg = "Since you checked the Email button, please fill in your email address"
document.myForm.Email_Address.focus()
}
}
else if(document.myForm.Contact_Type[1].checked) {
if(document.myForm.Phone_Number.value == "") {
msg = "Since you checked the Phone button, please fill in your phone number"
document.myForm.Phone_Number.focus()
}
}
else {
msg = "Please fill in the appropriate information"
}
if(msg != "") {
alert(msg)
return false;
}
else {
if(isOk == 1) {
return true;
}
else {
var newWin = window.open('','_blank',config="toolbars=no,status=nu,menubars=no,directories=no,scrollbars=yes,height=300,width=200")
newWin.document.write('<title>Validation Check</title><h1><center>Validate Your Entries:</h1></center>')
for(var i=0;i<document.myForm.elements.length;i++) {
if(document.myForm.elements[i].type == "text" || document.myForm.elements[i].type == "textarea") {
newWin.document.write(document.myForm.elements[i].name +": "+ document.myForm.elements[i].value +"<BR>")
}
else if(document.myForm.elements[i].type == "radio") {
if(document.myForm.elements[i].checked) {
newWin.document.write(document.myForm.elements[i].name +": "+ document.myForm.elements[i].value +"<BR>")
}
}
else if(document.myForm.elements[i].type == "password") {
var passWd = ""
for(var j=0;j<document.myForm.elements[i].value.length;j++) {
passWd += "*"
}
newWin.document.write(document.myForm.elements[i].name +": "+ passWd +"<BR>")
}
}
isOk = 1
return false;
}
}
}

function resetOk() {
isOk = 0
}

function checkCR(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {
return false;
}
}

document.onkeypress = checkCR;

function placeFocus() {
if (document.forms.length > 0) {
var field = document.forms[0];
for (i = 0; i < field.length; i++) {
if ((field.elements[i].type == "text") || (field.elements[i].type == "textarea") || (field.elements[i].type.toString().charAt(0) == "s")) {
document.forms[0].elements[i].focus();
break;
}
}
}
}

</script>
</head>

<body bgcolor="#Fdeed0" text="#000000" onLoad="placeFocus()">
<h3><b><font size="2" color="#990000">Use this form to book a trip with HGS. </font></b></h3>

<form name="myForm" method="post" action="http://www.hform.com/handler.cgi?1184868" onSubmit="return checkVals()">
<table width="540" border="0">
<tr>
<td width="38" height="34">
<h3>Name</h3>
</td>
<td width="492" height="34">
<h3>
<input type="text" name="Name" size="65" onchange="resetOk()">
</h3>
</td>
</tr>
</table>

<table width="541" border="0">
<tr>
<td width="37" height="31">
<h3>Email</h3>
</td>
<td width="494" height="31">
<h3>
<input type="text" name="Email_Address" size="45" maxlength="45" onchange="resetOk()">
</h3>
</td>
</tr>
</table>

<table width="500" border="0">
<tr>
<td width="124" height="31">
<h3>Phone <font size="-2"> (123-456-7890)</font></h3>
</td>
<td width="366" height="31">
<h3>
<input type="text" name="Phone_Number" size="12" maxlength="12" onchange="resetOk()">
</h3>
</td>
</tr>
</table>

<table width="545" border="0">
<tr>
<td width="539">
<h3>How should I contact you? (Pick only one)
<input type="radio" name="Contact_Type" value="Email" onchange="resetOk()">
Email
<input type="radio" name="Contact_Type" value="Phone" onchange="resetOk()">
Phone <br>
<br>
Use this space to tell me when you'd like to come to Montana, which
rivers you'd like<br>
to fish, and anything else I need to know to help you plan your trip.</h3>
</td>
</tr>
</table>

<table width="496" border="0" height="145">
<tr>
<td width="389" height="183" align="left" valign="top">
<h3>
<textarea name="Message" wrap="VIRTUAL" cols="45" rows="15"></textarea>
</h3>
</td>
<td width="97" height="183" align="left" valign="top">
<h3><b><font size="2" color="#990000">
<input type="submit" name="Submit" value="Submit">
<br><br>
</font></b><b><font size="2" color="#990000">
<input type="reset" name="Reset" value="Reset">
</font></b></h3>
<h3><b><font size="2" color="#990000">Thanks for your interest. I'll contact
you as soon as possible.</font></b> <b><font size="2" color="#990000">
</font></b></h3>
<h3><b><font size="2" color="#990000"> <i><a href="index.htm" target="_top"><font size="-2" color="#990000">Back</font></a></i><br>
<br><br><br><br></font></b></h3>
</td>
</tr>
</table>

</form>
</body>
</html>That will tell them all the fields they inputted (password fields will be marked with an asterick instead of characters) and their values. They will make sure of this is ok, and then close the window and click submit. That is your script just changed, I had to change the names to make the validation form appear better!

If they are to change something, it will pop up the window again until they are sure the inputted date is ok.

(NOTE: I just wanted to send this to make sure you know it can be done, the script is notyet ready, will post it soon!)

steelersfan88

03-07-2004, 09:34 PM

please note -- I am extremely sorry if any of my fake values were sent to an emai laddress ... I did not realize the form was hooked up. But maybe that script will make up for my idiocy!

robincham

03-10-2004, 10:03 AM

steelersfan88:

Yep, got some "replies" but figured they were from you, so no problem. Your help outweighs any minor "oops." Trying some variations on your submit checking script. If your final script is superior, I'll gratefully replace my tinkerings with it.

robincham