...

View Full Version : Validation of all elements on submit



hcrosex3
09-27-2012, 08:10 PM
How would I go about checking on submit if the user wants to leave the box unchecked and then validate all the form elements except the checkbox?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

function checkuserName() {

var the_input = document.getElementById('userName').value;

if (!/^[A-Z]/.test(the_input)) {

alert('Your username must begin with a capital letter.');
document.getElementById('userName').value = "";
return false;

}

}

function checkzip() {
var the_input = document.getElementById('zip').value;
if (!/^\d{5}$/.test(the_input)) {
alert('You can only enter a 5-digit number');
document.getElementById('zip').value = "";
return false;
}
}
function checkmoney() {
var the_input = document.getElementById('money').value;

if (!/^\$( )*\d*(.\d{2})?$/.test(the_input)){
alert('American currency beginning with $');
document.getElementById('money').value = "";
return false;
}
}
function checkarea() {
var the_input = document.getElementById('area').value;
if (!/^[\w\d]{30,100}$/.test(the_input)) {
alert('You Must Enter 30 Characters');
document.getElementById('area').value = "";
return false;
}
}
var btn = valButton(form.radio);
function checkbutton() {
if (btn == ""){
alert('No radio button selected');
document.getElementByType('radio').value = ""
return false;
}

}

function allowReset() {
return window.confirm("Go ahead and clear the form?");
}
function allowSend() {
return window.confirm("Are you ready to submit?");
}


</script>

</head>

<body>

<form action="form" method="get" name="form" onreset="return allowReset()" onsubmit="return allowSend()">

<p>First Name:<br />

<input type="text" name="userName" id="userName" onblur="checkuserName()" size="25" /><br />
Zipcode:<br />
<input type="text" name="zip" id="zip" onblur="checkzip()" size="25" /> <br/>
How much money do you have?<br />
<input type="text" name="money" id="money" onblur="checkmoney()" size="25" /><br />
Gender:<br/>
<input type="radio" name="sex" value="male" onblur="checkbutton()" >Male<br>
<input type="radio" name="sex" value="female" onblur="checkbutton()">Female<br />
Tell us about yourself: <br />
<textarea name="area" id="area" onblur="checkarea()" cols="30" rows="5"></textarea> <br />
Check to stay on this page. <br />
<input type="checkbox" name="agree" value="yes">Check It!<br>
<br />
<input type="submit" value="Submit">
<input type="reset" value="Reset">

</p>






</form>

</body>

</html>

Philip M
09-27-2012, 10:03 PM
<input type="radio" name="sex" value="male" onblur="checkbutton()" >Male<br>
<input type="radio" name="sex" value="female" onblur="checkbutton()">Female<br />


You cannot use onblur with radio buttons. You must use onclick and loop through the buttons to get the value of the one selected.


function checkButton() {
var f = document.form.sex;
for (var i=0; i <f.length; i++) {
if (f.[i].checked) {
var gender = f[i].value;
}
}
}

I am unclear as to the purpose of the checkbox. Is it something like


function chkbox() {
if (!document.form.agree.checked) {
var c = confirm ("You have not checked the checkbox. Is that what you want to do"?);
if (!c) {
document.form.agree.checked= true; // check the box
}
}
}

hcrosex3
09-28-2012, 07:13 PM
so I've made some edits to the code. What i'm looking to happen is it will verify the use wants to leave the box unchecked and then from there verify all the other form field.
As of now it is verifying the radio button and the text length but it won't return anything after that.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
/*<![CDATA[*/

function checkzip() {
var the_input = document.getElementById('zip').value;
if (!/^\d{5}$/.test(the_input)) {
alert('You can only enter a 5-digit number');
document.getElementById('zip').value = "";
return false;
}
}

function checkuserName() {

var the_input = document.getElementById('userName').value;

if (!/^[A-Z]/.test(the_input)) {

alert('Your username must begin with a capital letter.');
document.getElementById('userName').value = "";
return false;

}

}

function checkmoney() {
var the_input = document.getElementById('money').value;

if (!/^\$( )*\d*(.\d{2})?$/.test(the_input)){
alert('American currency beginning with $');
document.getElementById('money').value = "";
return false;
}
}

function update_counter(counter, text_elem, max_len)
{
var counterElem = document.getElementById(counter);
var textElem = document.getElementById(text_elem);
var len = textElem.value.length;
var val = max_len - textElem.value.length;
counterElem.innerHTML = val;
}


function check_content_length(elem_id, max_len)
{
var elem = document.getElementById(elem_id);
if(elem.value.length != max_len) {
return false;
}
return true;
}

var MAX = 30;
function check_char_length(elem_id, max_len)
{
if(check_content_length(elem_id, max_len)) {
return true;
} else {

alert("Required length is " + max_len + " characters");
return false;
}
}



function allowReset() {
return window.confirm("Go ahead and clear the form?");
}
function allowSend(elem_id, max_len) {


if (!document.form.agree.checked) {
var c = confirm ("You have not checked the checkbox. Is that what you want to do?");

if (!c) {
document.form.agree.checked= true; // check the box

}

}
var radio_check_val = "";
for (i = 0; i < document.getElementsByName('gender').length; i++) {
if (document.getElementsByName('gender')[i].checked) {

radio_check_val = document.getElementsByName('gender')[i].value;


}

}
if (radio_check_val === "")
{

alert("please select radio button");
}



{

return check_char_length('text_fld', MAX);
return checkzip();
}

}


/*]]>*/
</script>

</head>

<body onload="update_counter('text_counter','text_fld', MAX);">

<form action method="get" name="form" onreset="return allowReset()" onsubmit="return allowSend()">

<p> Zip Code: <br />
<input type="text" name="zip" id="zip" onblur="checkzip()" size="25" /> <br/>
First Name:<br />

<input type="text" name="userName" id="userName" onblur="checkuserName()" size="25" /><br />

How much money do you have?<br />
<input type="text" name="money" id="money" onblur="checkmoney()" size="25" /><br />
Tell us about yourself: <br />
Enter EXACTLY 30 characters:<br />
<textarea id="text_fld" name="text_fld" rows="4" cols="40" onkeyup="update_counter('text_counter', 'text_fld', MAX)" onblur="return check_char_length('text_fld', MAX);" >Default text</textarea>
<span id="text_counter">8</span> characters left<br />
Gender:<br/>
<input type="radio" name="gender" value="male" >Male<br>
<input type="radio" name="gender" value="female" >Female<br />

Check to stay on this page after completion. <br />
<input type="checkbox" name="agree" value="yes">Check It!<br>
<br />
What do you like? <br />
<select name="randoms">
<option></option>
<option value="Pizza">Pizza</option>
<option value="Cake">Cake</option>
<option value="Aliens">Aliens</option>
<option value="Computers">Computers</option>
</select> <br /> <br />

<input type="submit" value="Submit">
<input type="reset" value="Reset">

</p>






</form>

</body>

</html>

Philip M
10-19-2012, 09:40 AM
At a glance,

var MAX = 30;
MAX is never referred to. You have another variable named max_len.

It is your responsibility to die() if necessary….. - PHP Manual



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum