Take the following script and add Javascript code to validate the data that the
ID: 3735472 • Letter: T
Question
Take the following script and add Javascript code to validate the data that the user enters into the field boxes such as textboxes, radio buttons, checkboxes, and drop-down lists. Please write code to validate your form in either batch validation or real time validation.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<br>
<br>
<form action="/index.html" method="get">
Name:
<input type="text" name="name" value="name">
<br>
<br>
Comments:
<textarea name="message" rows="10" cols="30">Wow! What a great Web site!</textarea>
<br>
<br>
Email Address:
<input type="text" name="name" value="***********">
<br>
<br>
<b>Things you liked:</b>
<br>
Site design <input type="checkbox" name="1" value="1">
Links <input type="checkbox" name="2" value="2" checked="checked">
Ease of use<input type="checkbox" name="2" value="2" >
Images<input type="checkbox" name="2" value="2" >
Source code <input type="checkbox" name="2" value="2" >
<br>
<br>
<b> How did you get to our site? </b>
<br>
Search engine <input type="radio" name="1" value="1"> Links from another site
<input type="radio" name="1" value="1" checked> Deitel.com Web site
<input type="radio" name="1" value="1"> Reference in a book <input type="radio" name="1" value="1"> Other <input type="radio" name="1" value="1">
<br>
<br>
Rate our site:
<select>
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="10">6</option>
<option value="9">5</option>
<option value="8">4</option>
<option value="7">3</option>
<option value="10">2</option>
<option value="9">1</option>
</select>
<br>
<input type="submit" value="Submit Your Entries">
<input type="reset" value="Clear Your Entries">
</form>
<br>
<br>
</body>
</html>
Explanation / Answer
Please find the code below with detailed inline comments.
CODE
==================
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function validate() {
var name = document.forms["myform"]["full_name"].value;
var email = document.forms["myform"]["email"].value;
if(name == ""){
alert("Please enter a valid name!");
return;
}
var atposition = email.indexOf("@");
var dotposition = email.lastIndexOf(".");
if (atposition < 1 || dotposition < atposition + 2 || dotposition + 2 >= email.length){
alert("Please enter a valid e-mail address!");
return false;
}
if(document.forms["myform"]["checkbox1"].checked == false && document.forms["myform"]["checkbox2"].checked == false &&
document.forms["myform"]["checkbox3"].checked == false && document.forms["myform"]["checkbox4"].checked == false &&
document.forms["myform"]["checkbox5"].checked == false){
alert("Please select atleast one thing you liked!");
return false;
}
return true;
}
</script>
</head>
<body>
<br>
<br>
<form name"myform">
Name:
<input type="text" name="full_name" value="name" id="name">
<br>
<br>
Comments:
<textarea name="message" id="message" rows="10" cols="30">Wow! What a great Web site!</textarea>
<br>
<br>
Email Address:
<input type="text" name="email" id="email" value="***********">
<br>
<br>
<b>Things you liked:</b>
<br>
Site design <input type="checkbox" name="checkbox1" value="1">
Links <input type="checkbox" name="2" value="checkbox2" checked="checked">
Ease of use<input type="checkbox" name="checkbox3" value="2" >
Images<input type="checkbox" name="checkbox4" value="2" >
Source code <input type="checkbox" name="checkbox5" value="2" >
<br>
<br>
<b> How did you get to our site? </b>
<br>
Search engine <input type="radio" name="1" value="1"> Links from another site
<input type="radio" name="1" value="1" checked> Deitel.com Web site
<input type="radio" name="1" value="1"> Reference in a book <input type="radio" name="1" value="1"> Other <input type="radio" name="1" value="1">
<br>
<br>
Rate our site:
<select>
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="10">6</option>
<option value="9">5</option>
<option value="8">4</option>
<option value="7">3</option>
<option value="10">2</option>
<option value="9">1</option>
</select>
<br>
<button type="button" >Submit Your Entries</button>
<input type="reset" value="Clear Your Entries">
</form>
<br>
<br>
</body>
</html>
**Note: The Radio buttons and Select option need not be validated as the user has to select atleast one value.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.