Add form validation.It should include a window alert() method when the user subm
ID: 3581767 • Letter: A
Question
Add form validation.It should include a window alert() method when the user submit the form incomplete.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<u><center><h1>Gym Membership Form</h1></center></u>
<body>
<font face="Courier New">
<form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post">
<fieldset>
<legend><h1>Member Details</h1></legend>
<font face="Courier New">
First Name:<input type="text" name="First Name" size="60"/>
Last Name: <input type="text" name="Last Name" size="60"/></p>
Birth Date:;<input type="text" name="Birth Date" size="38"/>
Female<input type="checkbox" name="Female"/>
Male<input type="checkbox" name="Male"/></p>
Mailing Address:<input type="text" name="Mailing Address" size="60"/></p>
City:<input type="text" name="City" size="38"/>
State: <input type="text" name="State" size="25"/>
Zip Code: <input type="text" name="Zip Code" size="25"/></p>
Telephone:<input type="text" name="Telephone" size="40"/>
Email: <input type="text" name="Email" size="38"/></p>
Emergency Contact Name:<input type="text" name="Emergency Contact Name" size="40"/>
Emergency Contact Phone: <input type="text" name="Emergency Contact Phone" size="40"/>
</fieldset>
</body>
</html>
<br/>
<html>
<body>
<form>
<fieldset>
<legend><h1>Membership Type</h1></legend>
<font face="Courier New">
<table>
<tr>
<td></td>
<td><input type="checkbox" name="$10/month membership"/>$10/month membership</td></tr>
<table>
<tr>
<td></td>
<td><input type="checkbox" name="$15/month membership"/>$15/month membership</td></tr>
<table>
<tr>
<td></td>
<td><input type="checkbox" name="$25/month membership"/>$25/month membership</td></tr>
</table>
</fieldset>
</body>
</html>
<br/>
<form>
<fieldset>
<legend><h1>Bank Information</h1></legend>
<font face="Courier New">
Cardholder Full Name:<input type="text" name="Cardholder's Name" size="60"/>
</p>
Card Number:<input type="text" name="Card Number" size="60"/>
Expiration Date:<input type="text" name="Expiration Date" size="40"/></p>
Security Code: <input type="text" name="Security Code" size="60"/></p>
Billing Address is the same as the mailing address?
Yes<input type="checkbox" name="Yes"/>
No<input type="checkbox" name="No"/></p>
If not,please add your billing address:</p>
Billing Address:<input type="text" name="Billing Address" size="60"/></p>
City:<input type="text" name="Billing City" size="30"/>
State: <input type="text" name="Billing State" size="25"/>
Zip Code: <input type="text" name="Billing Zip Code" size="25"/></p>
</fieldset>
</body>
</html>
<br/>
<br/>
<input type="checkbox" name=""/>I understand and agree that checking the box above constitutes my electronic signature and is intended to have the same force and effect as a manual signature.I agree to pay each month until I cancel my membership.<br/>
<br/>
<center><input type="Submit" value="Click to Submit"/>
<input type= "reset" value="Clear Entries"/></center>
</form>
</body>
</html>
Explanation / Answer
<!--
On this form we call on submit function dataSubmit()
In this function check all field one by one.
We currently use javascript validation on this form
-->
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<script>
/*
* This function use on on submit form and check all field one by one
* If you wany any other validation apply you condation in same function
*/
function dataSubmit(){
var error = '';
if(document.getElementsByName('first_name')[0].value == ''){
error += 'Please enter first name ';
}
if(document.getElementsByName('last_name')[0].value == ''){
error += 'Please enter last name ';
}
if(document.getElementsByName('Birth_Date')[0].value == ''){
error += 'Please enter Birth Date ';
}
if(document.getElementsByName('female')[0].checked == false && document.getElementsByName('male')[0].checked == false){
error += 'Please select gander ';
}
if(document.getElementsByName('Mailing_Address')[0].value == ''){
error += 'Please enter Mailing Addresse ';
}
if(document.getElementsByName('City')[0].value == ''){
error += 'Please enter City ';
}
if(document.getElementsByName('State')[0].value == ''){
error += 'Please enter State ';
}
if(document.getElementsByName('Zip_Code')[0].value == ''){
error += 'Please enter Zip Code ';
}
if(document.getElementsByName('Telephone')[0].value == ''){
error += 'Please enter Telephone ';
}
if(document.getElementsByName('Email')[0].value == ''){
error += 'Please enter Email ';
}
if(document.getElementsByName('Emergency_Contact_Name')[0].value == ''){
error += 'Please enter Emergency Contact Name ';
}
if(document.getElementsByName('Emergency_Contact_Phone')[0].value == ''){
error += 'Please enter Emergency Contact Phone ';
}
if(document.getElementsByName('$10/monthmembership')[0].checked == false && document.getElementsByName('$15/monthmembership')[0].checked == false && document.getElementsByName('$25/monthmembership')[0].checked == false){
error += 'Please select atlest one membership ';
}
if(document.getElementsByName('Cardholder's_Name')[0].value == ''){
error += 'Please enter Cardholder's Name ';
}
if(document.getElementsByName('Card_Number')[0].value == ''){
error += 'Please enter Card Number ';
}
if(document.getElementsByName('Expiration_Date')[0].value == ''){
error += 'Please enter Expiration Date ';
}
if(document.getElementsByName('Yes')[0].checked == false && document.getElementsByName('No')[0].checked == false){
error += 'Please select Billing and miling address same ';
}
if(document.getElementsByName('Billing_Address')[0].value == ''){
error += 'Please enter Billing_Address ';
}
if(document.getElementsByName('Billing State')[0].value == ''){
error += 'Please enter Billing State ';
}
if(document.getElementsByName('Billing Zip Code')[0].value == ''){
error += 'Please enter Billing Zip Code ';
}
if(document.getElementsByName('Billing City')[0].value == ''){
error += 'Please enter Billing City ';
}
if(document.getElementsByName('agree')[0].checked == false){
error += 'Are you agree with condation ';
}
if(error != ''){
alert(error);
return false;
}
}
</script>
</head>
<u><center><h1>Gym Membership Form</h1></center></u>
<body>
<font face="Courier New">
<form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post">
<fieldset>
<legend><h1>Member Details</h1></legend>
<font face="Courier New">
First Name:<input type="text" name="first_name" size="60"/>
Last Name: <input type="text" name="last_name" size="60"/></p>
Birth Date:;<input type="text" name="Birth_Date" size="38"/>
Female<input type="checkbox" name="female"/>
Male<input type="checkbox" name="male"/></p>
Mailing Address:<input type="text" name="Mailing_Address" size="60"/></p>
City:<input type="text" name="City" size="38"/>
State: <input type="text" name="State" size="25"/>
Zip Code: <input type="text" name="Zip_Code" size="25"/></p>
Telephone:<input type="text" name="Telephone" size="40"/>
Email: <input type="text" name="Email" size="38"/></p>
Emergency Contact Name:<input type="text" name="Emergency_Contact_Name" size="40"/>
Emergency Contact Phone: <input type="text" name="Emergency_Contact_Phone" size="40"/>
</fieldset>
<fieldset>
<legend><h1>Membership Type</h1></legend>
<font face="Courier New">
<table>
<tr>
<td></td>
<td><input type="checkbox" name="$10/monthmembership" value="10"/>$10/month membership</td></tr>
<table>
<tr>
<td></td>
<td><input type="checkbox" name="$15/monthmembership" value="15"/>$15/month membership</td></tr>
<table>
<tr>
<td></td>
<td><input type="checkbox" name="$25/monthmembership" value="25"/>$25/month membership</td></tr>
</table>
</fieldset>
<br/>
<fieldset>
<legend><h1>Bank Information</h1></legend>
<font face="Courier New">
Cardholder Full Name:<input type="text" name="Cardholder's_Name" size="60"/>
</p>
Card Number:<input type="text" name="Card_Number" size="60"/>
Expiration Date:<input type="text" name="Expiration_Date" size="40"/></p>
Security Code: <input type="text" name="Security Code" size="60"/></p>
Billing Address is the same as the mailing address?
Yes<input type="checkbox" name="Yes"/>
No<input type="checkbox" name="No"/></p>
If not,please add your billing address:</p>
Billing Address:<input type="text" name="Billing_Address" size="60"/></p>
City:<input type="text" name="Billing City" size="30"/>
State: <input type="text" name="Billing State" size="25"/>
Zip Code: <input type="text" name="Billing Zip Code" size="25"/></p>
</fieldset>
<br/>
<br/>
<input type="checkbox" name="agree"/>I understand and agree that checking the box above constitutes my electronic signature and is intended to have the same force and effect as a manual signature.I agree to pay each month until I cancel my membership.<br/>
<br/>
<center><input type="Submit" value="Click to Submit"/>
<input type= "reset" value="Clear Entries"/></center>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.