Hi everyone, I encountered an error with regards to my program in html and javascript. When I submit input information in the fields of name, email and age, it prompts an error message, saying that I must choose a gender. However, after prompting the error message, the information in the name, email and age has been deleted. This is my code, I hope someone could help me.
<html>
<head>
<!-- Creating Page Title -->
<title>validation</title>
<!-- For Form validation we have to use JavaScript
JavaScript needs only a browser to run, there is no need of
server to run JavaScript -->
<script language="javascript">
//Start JavaScript Function
function verify() {
//for field must take some input
if (document.form1.name.value == "") {
alert("Please give the name");
document.form1.name.forus();
return false;
}
//for field must take some input
if (document.form1.email.value == "") {
alert("Please give the email");
return false;
}
// for field must take some input
if (document.form1.age.value == "") {
alert("Please give age");
document.form1.age.focus();
return false;
}
// alert thrown when age limit is below 18 and above 60
if (document.form1.age.value < 18 || document.form1.age.value > 60) {
alert("Please give Age range between 18 and 60");
document.form1.age.focus();
return false;
}
// Gender must be selected
if (document.form1.gender[0].checked == false &&
document.form1.gender[1].checked == false) {
alert("Please select gender");
document.form1.gender.focus();
return false;
}
// At least one checkbox must be checked
if (document.form1.language1.checked == false &&
document.form1.language2.checked == false &&
document.form1.language3.checked == false) {
alert("Please Select your choice of language(Atleast One)");
return false;
}
//Country must be chosed
if (document.form1.country.value == "") {
alert("Please give country");
document.form1.country.focus();
return false;
}
//field must take some input
if (document.form1.myaddress.value == "") {
alert("Please give address");
document.form1.myaddress.focus();
return false;
}
//field must take some input
if (document.form1.u_name.value == "") {
alert("Please give username");
document.form1.u_name.focus();
return false;
}
//field must take some input
if (document.form1.pass.value == "") {
alert("Please give Password");
document.form1.pass.focus();
return false;
}
//password length must be greater than 5 characters
if (document.form1.pass.value.lenght < 6) {
alert("Please give a Password more than 5 characters");
document.form1.pass.focus();
return false;
}
// for field must take some input
if (document.form1.r_pass.value == "") {
alert("Please retype your password");
document.form1.r_pass.focus();
return false;
}
//password and confirm password must matched
if ((document.form1.pass.value) != (document.form1.r_pass.value)) {
alert("Your password does not match");
document.form1.r_pass.value == "";
document.form1.r_pass.focus();
return false;
}
return( true );
}
</script>
</head>
<body>
<!-- Creating Form -->
<form method="POST" action="" name="form1">
<!-- Creating Table, having 11rows and 2 columns. -->
<table border="2" align="center" cellpadding="7">
<!-- Start First Row -->
<tr>
<!-- Creating First Column -->
<td><strong>Name:</strong></td>
<!-- Creating Second Columns -->
<td>
<!-- TextBox -->
<input type="text" name="name"/>
</td>
<!-- Close First Row -->
</tr>
<!-- Creting First Columns -->
<td><strong>Email:</strong></td>
<!-- Creating Second Columns -->
<td>
<!-- Textbox -->
<input type="text" name="email"/>
</td>
<!-- Close Second row -->
</tr>
<tr>
<td><strong>Age:</strong></td>
<td>
<!-- Textbox -->
<input type="text" name="age" size="2"/>
</td>
</tr>
<tr>
<td><strong>Gender:</strong></td>
<td>
<!-- Radio Butong -->
<input type="radio" name="gender" value="Male"/>Male
<input type="radio" name="gender" value="Female"/>Female
</td>
</tr>
<tr>
<td><strong>Language:</strong></td>
<td>
<!-- Check box -->
<input type="checkbox" name="language1" value="Hindi"/>Hindi
<input type="checkbox" name="language2" value="English"/>English
<input type="checkbox" name="language3" value="Urdu"/>Urdu
</td>
</tr>
<tr>
<td><strong>Country:</strong></td>
<td>
<!-- Combo Box -->
<select name="country"/>
<option value="" selected/>
--Select--
<option value="indi"/>
India
<option value="pakistan"/>
Pakistan
<option value="beangladesh"/>
Beangladesh
<option value="srilanka"/>
Srilanka
</select>
</td>
</tr>
<tr>
<td><strong>Address:</strong></td>
<td>
<!-- TextArea -->
<textarea rows="5" cols="20" name="myaddress"/></textarea>
</td>
</tr>
<tr>
<td><strong>Username:</strong></td>
<td>
<!-- Textbox -->
<input type="text" name="u_name"/>
</td>
</tr>
<tr>
<td><strong>Password:</strong></td>
<td>
<!-- Password Field -->
<input type="password" name="pass"/>
</td>
</tr>
<tr>
<td><strong>Retype Password:</strong></td>
<td>
<!-- Password Field -->
<input type="password" name="r_pass"/>
</td>
</tr>
<tr align="center">
<td>
<!--Submit Button, Function verify need to be called when we process
submit button-->
<input type="submit" value="Submit" onClick="return (verify());"/>
</td>
<td>
<!--Reset Button-->
<input type="reset">
</td>
</tr>
<!--Table Close-->
</table>
<!--Form Close -->
</form>
</body>
</html>
Hi everyone, I encountered an error with regards to my program in html and javascript. When I submit input information in the fields of name, email and age, it prompts an error message, saying that I must choose a gender. However, after prompting the error message, the information in the name, email and age has been deleted. This is my code, I hope someone could help me.
<html>
<head>
<!-- Creating Page Title -->
<title>validation</title>
<!-- For Form validation we have to use JavaScript
JavaScript needs only a browser to run, there is no need of
server to run JavaScript -->
<script language="javascript">
//Start JavaScript Function
function verify() {
//for field must take some input
if (document.form1.name.value == "") {
alert("Please give the name");
document.form1.name.forus();
return false;
}
//for field must take some input
if (document.form1.email.value == "") {
alert("Please give the email");
return false;
}
// for field must take some input
if (document.form1.age.value == "") {
alert("Please give age");
document.form1.age.focus();
return false;
}
// alert thrown when age limit is below 18 and above 60
if (document.form1.age.value < 18 || document.form1.age.value > 60) {
alert("Please give Age range between 18 and 60");
document.form1.age.focus();
return false;
}
// Gender must be selected
if (document.form1.gender[0].checked == false &&
document.form1.gender[1].checked == false) {
alert("Please select gender");
document.form1.gender.focus();
return false;
}
// At least one checkbox must be checked
if (document.form1.language1.checked == false &&
document.form1.language2.checked == false &&
document.form1.language3.checked == false) {
alert("Please Select your choice of language(Atleast One)");
return false;
}
//Country must be chosed
if (document.form1.country.value == "") {
alert("Please give country");
document.form1.country.focus();
return false;
}
//field must take some input
if (document.form1.myaddress.value == "") {
alert("Please give address");
document.form1.myaddress.focus();
return false;
}
//field must take some input
if (document.form1.u_name.value == "") {
alert("Please give username");
document.form1.u_name.focus();
return false;
}
//field must take some input
if (document.form1.pass.value == "") {
alert("Please give Password");
document.form1.pass.focus();
return false;
}
//password length must be greater than 5 characters
if (document.form1.pass.value.lenght < 6) {
alert("Please give a Password more than 5 characters");
document.form1.pass.focus();
return false;
}
// for field must take some input
if (document.form1.r_pass.value == "") {
alert("Please retype your password");
document.form1.r_pass.focus();
return false;
}
//password and confirm password must matched
if ((document.form1.pass.value) != (document.form1.r_pass.value)) {
alert("Your password does not match");
document.form1.r_pass.value == "";
document.form1.r_pass.focus();
return false;
}
return( true );
}
</script>
</head>
<body>
<!-- Creating Form -->
<form method="POST" action="" name="form1">
<!-- Creating Table, having 11rows and 2 columns. -->
<table border="2" align="center" cellpadding="7">
<!-- Start First Row -->
<tr>
<!-- Creating First Column -->
<td><strong>Name:</strong></td>
<!-- Creating Second Columns -->
<td>
<!-- TextBox -->
<input type="text" name="name"/>
</td>
<!-- Close First Row -->
</tr>
<!-- Creting First Columns -->
<td><strong>Email:</strong></td>
<!-- Creating Second Columns -->
<td>
<!-- Textbox -->
<input type="text" name="email"/>
</td>
<!-- Close Second row -->
</tr>
<tr>
<td><strong>Age:</strong></td>
<td>
<!-- Textbox -->
<input type="text" name="age" size="2"/>
</td>
</tr>
<tr>
<td><strong>Gender:</strong></td>
<td>
<!-- Radio Butong -->
<input type="radio" name="gender" value="Male"/>Male
<input type="radio" name="gender" value="Female"/>Female
</td>
</tr>
<tr>
<td><strong>Language:</strong></td>
<td>
<!-- Check box -->
<input type="checkbox" name="language1" value="Hindi"/>Hindi
<input type="checkbox" name="language2" value="English"/>English
<input type="checkbox" name="language3" value="Urdu"/>Urdu
</td>
</tr>
<tr>
<td><strong>Country:</strong></td>
<td>
<!-- Combo Box -->
<select name="country"/>
<option value="" selected/>
--Select--
<option value="indi"/>
India
<option value="pakistan"/>
Pakistan
<option value="beangladesh"/>
Beangladesh
<option value="srilanka"/>
Srilanka
</select>
</td>
</tr>
<tr>
<td><strong>Address:</strong></td>
<td>
<!-- TextArea -->
<textarea rows="5" cols="20" name="myaddress"/></textarea>
</td>
</tr>
<tr>
<td><strong>Username:</strong></td>
<td>
<!-- Textbox -->
<input type="text" name="u_name"/>
</td>
</tr>
<tr>
<td><strong>Password:</strong></td>
<td>
<!-- Password Field -->
<input type="password" name="pass"/>
</td>
</tr>
<tr>
<td><strong>Retype Password:</strong></td>
<td>
<!-- Password Field -->
<input type="password" name="r_pass"/>
</td>
</tr>
<tr align="center">
<td>
<!--Submit Button, Function verify need to be called when we process
submit button-->
<input type="submit" value="Submit" onClick="return (verify());"/>
</td>
<td>
<!--Reset Button-->
<input type="reset">
</td>
</tr>
<!--Table Close-->
</table>
<!--Form Close -->
</form>
</body>
</html>
- 1 If you set up a demo at jsfiddle then it might be easier for people to have a look. – Sean Dawson Commented Nov 3, 2012 at 10:24
- Why this have 27k views - and no upvotes on answers or questions? – fotanus Commented May 31, 2014 at 1:59
3 Answers
Reset to default 0Here is a small code. You can build it on your own
<script type="text/javascript">
//Start JavaScript Function
function verify()
{
//for field must take some input
if(document.forms["form1"]["name"].value=="")
{
alert("Please give the name");
return false;
}
}
</script>
<form method="POST" action="test3.asp" name="form1" onSubmit="return verify()">
<!-- Creating Table, having 11rows and 2 columns. -->
<table border="2" align="center" cellpadding="7">
<!-- Start First Row -->
<tr>
<!-- Creating First Column -->
<td><strong>Name:</strong></td>
<!-- Creating Second Columns -->
<td>
<!-- TextBox -->
<input type ="text" name="name"/>
<input type="submit" value="Submit" />
</form>
Try it out
Please check this link - http://www.w3schools./js/js_form_validation.asp
Here you can find both empty field and email validation.
In order to keep the field data, you can use cookie/session or if you just use in page validation, u can directly set the it via JavaScript code
this.form.elements["element_name"].value = 'Some Value';
Here, element_name should be replaced with current validating filed name and Some Value should be the current value of the current validating field.
Use this code before return false.
Thanks
<script type="text/javascript">
function submitForm(){
if(document.forms[0].name.value=="" ){
window.alert("name Required");
return false;
}
}
</script>