Hi there,
I'm creating a form that has a variety of input types that need to be validated. I've got two alternative questions:
1
I initially found the following javascript code elsewhere on codingforums and it matches what I want to do with my form.
My problem with this is that the alerts pop up one by one as the issues are caught. Is there a way to group all the alerts together in one pop up?
2
Alternatively:
I've heard that alerts aren't really a good idea for client-side validation because users can disable them, so an error works much better. I can't, for the life of me figure out how to set up a javascript that pops up error messages as the issues arise (would be great to have them listed all at once as well).
Please use the same html below to fix Question 2.
Essentially, I'd like an error to pop up whenever any of the following occurs:
- radio button group has no selection (please note: there is more than 1 radio group)
- A text box is missing an entry
Thanks so much in advance!
Please note: I am a complete js noob and have been randomly patching up code from a variety of sources so the explanation would be helpful if it was simplified. haha thanks!
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Auto Insurance Form
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function validate(nForm){
var nTitle = nForm['title'];
var nFirstName = nForm['firstname'];
var nLastName = nForm['lastname'];
var nSex = nForm['sex'];
var nCol = nForm['col'];
var nTitle3 = nForm['title3'];
var nTitle4 = nForm['title4'];
if (nTitle.selectedIndex == 0)
{
alert('Choose your title');
return false;
}
if (nFirstName.value.replace(/\s/g, "").length < 1)
{
alert('Enter your first name');
return false;
}
if (nLastName.value.replace(/\s/g, "").length < 1)
{
alert('Enter your last name');
return false;
}
if (nSex[0].checked == false && nSex[1].checked == false)
{
alert('Male or Female?');
return false;
}
if (nCol[0].checked == false && nCol[1].checked == false)
{
alert('Choose your age group');
return false;
}
if (nTitle3.selectedIndex == 0)
{
alert('Select the number of previous claims');
return false;
}
if (nTitle4.selectedIndex == 0)
{
alert('Estimate your annual mileage');
return false;
}
alert('Thank you for your submission')
return true;
}
</script>
<style type="text/css">
body {background-color: #fffacd; margin-top: 60px;}
form {width: 620px; margin: auto; font-family: 'times new roman'; font-size: 12pt;}
fieldset {width: 620px; padding-left: 10px; background-color: #eee8aa; border: 1px solid #e6b280;}
legend {font-family: arial; font-size: 14pt; color: #000000; background-color: transparent; padding-top: 3px;
padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
.submitBtn {background-color: #fff8dc; border: 1px solid #000000; font-family: arial; font-size: 10pt;
font-weight: bold; cursor: pointer; display: block; margin-left: auto; margin-right: auto;
margin-top: 5px; margin-bottom: 5px;}
</style>
</head>
<body>
<form action="" method="post" onsubmit="return validate(this)">
<fieldset>
<legend>Form</legend>
<table>
<tr>
<td>
Title
</td>
<td>
<select class="select1col" name="title">
<option>
Please select
</option>
<option value="MR">
Mr
</option>
<option value="MRS">
Mrs
</option>
<option value="MIS">
Miss
</option>
<option value="MS">
Ms
</option>
<option value="DR">
Dr
</option>
<option value="REV">
Reverend
</option>
<option value="SIR">
Sir
</option>
</select>
</td>
</tr>
<tr>
<td>
First Name
</td>
<td>
<input type="text" name="firstname">
</td>
</tr>
<tr>
<td>
Last Name
</td>
<td>
<input type="text" name="lastname">
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
Sex
</td>
<td colspan="2" class="center">
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td>
Male
</td>
<td>
<input type="radio" name="sex" value="M">
</td>
<td>
Female
</td>
<td>
<input type="radio" name="sex" value="F">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Age
</td>
</tr>
<tr>
<td>
18-24
</td>
<td>
<input type="radio" name="col" value="18-24">
</td>
</tr>
<tr>
<td>
25 & Over
</td>
<td>
<input type="radio" name="col" value="25-34">
</td>
</tr>
</table>
<hr>
Car Details
<hr>
<table>
<tr>
<td>
No of No Claims
</td>
<td>
<select class="select1col" name="title3">
<option value="">
Please select
</option>
<option>
1
</option>
<option>
2
</option>
<option>
3
</option>
<option>
4
</option>
<option>
5+
</option>
</select>
</td>
</tr>
<tr>
<td>
Estimated Annual Mileage
</td>
<td colspan="2" class="center">
<select class="select1col" name="title4">
<option value="">
Please select
</option>
<option>
3000 or less
</option>
<option>
5000 or more
</option>
</select>
</td>
</tr>
</table>
<input type="submit" name="submit" value="Submit" class="submitBtn">
</fieldset>
</form>
</body>
</html>
Before you post, read our: 
