/    Sign up×
Community /Pin to ProfileBookmark

"Either/or" dual-form field validation

Copy linkTweet thisAlerts:
Mar 06.2004

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.

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@96turnerriMar 06.2004 — 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;

}

}
Copy linkTweet thisAlerts:
@steelersfan88Mar 06.2004 — or:[code=php]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")
}[/code]
Copy linkTweet thisAlerts:
@steelersfan88Mar 06.2004 — Here's a complete script:[code=php]<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>[/code]
Copy linkTweet thisAlerts:
@robinchamauthorMar 06.2004 — 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
Copy linkTweet thisAlerts:
@steelersfan88Mar 06.2004 — How do I tie onclick validation to Submit button already developed[/QUOTE]Try this, this uses the onsubmit method instead of onclick:[code=php]<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>[/code]Note: You may want to move the script into the head section of your code.tied to other validation scripts?[/QUOTE]This script will tie it into the onsubmit methodand allow more validation scripts. Try the following:[code=php]<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>[/code] And, how to force user to choose only one button (other than asking nicely and hoping for compliance)?[/QUOTE]Why don't you have one selected, as the scripts above illustrate!
Copy linkTweet thisAlerts:
@robinchamauthorMar 06.2004 — 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">&nbsp;&nbsp;(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
Copy linkTweet thisAlerts:
@Paul_JrMar 06.2004 — [i]Originally posted by robincham [/i]

[B]I can't seem to keep the buttons from both being selected. Pity a poor learner and continue suggestions.



robincham [/B][/QUOTE]
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.
Copy linkTweet thisAlerts:
@robinchamauthorMar 08.2004 — 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
Copy linkTweet thisAlerts:
@steelersfan88Mar 08.2004 — You could keep a global variable in the script, and do something like this:[code=php]<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>[/code]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!)
Copy linkTweet thisAlerts:
@steelersfan88Mar 08.2004 — 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!
Copy linkTweet thisAlerts:
@robinchamauthorMar 10.2004 — 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
×

Success!

Help @robincham 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 5.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...