Form validation and combo boxes

D

ddog

I have a form with 3 text fields (one of which is a zip code) and 5
combo boxes. The combo boxes are all set with the first value as
'selected' when the page is first displayed. The 3 text fields are
required and are by default empty. I need to validate that the text
fields have an entry and that the zip code is numeric and the correct
length. If the form fails validation - one of the text fields is empty,
for example - I need to alert the user and leave the combo boxes as
they were when the submission occurred. In other words, I don't want
the user to have to reselect the combo box values after validation
fails. I'm new at this - usually do it server-side, but the boss wants
to use JavaScript. Can someone please point me to an example. I've
Googled to no avail.

Thanks!
 
B

Bart Van der Donck

ddog said:
I have a form with 3 text fields (one of which is a zip code) and 5
combo boxes. The combo boxes are all set with the first value as
'selected' when the page is first displayed. The 3 text fields are
required and are by default empty. I need to validate that the text
fields have an entry and that the zip code is numeric and the correct
length. If the form fails validation - one of the text fields is empty,
for example - I need to alert the user and leave the combo boxes as
they were when the submission occurred. In other words, I don't want
the user to have to reselect the combo box values after validation
fails. I'm new at this - usually do it server-side, but the boss wants
to use JavaScript.
Click to expand...

<script type="text/javascript">
function fch() {
if ( document.forms[0].c4.value == '' ||
document.forms[0].c5.value == '' ||
!/^\d{5}$/.test(document.forms[0].c3.value)
)
{
alert('Form is not complete, please try again.');
return false;
}
}
</script>

<form method="post" action="script.asp" onSubmit="return fch()">
<select size="1" name="c1">
<option value="one" selected>one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<hr>
<select size="1" name="c2">
<option value="A" selected>A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<hr>
<input type="text" name="c3" value="" maxlength="5"> (ZIP)
<hr>
<input type="text" name="c4" value="">
<hr>
<input type="text" name="c5" value="">
<hr>
<input type="submit">

Hope this helps,
 
V

VK

ddog said:
I don't want
the user to have to reselect the combo box values after validation
fails. I'm new at this - usually do it server-side <snip>
Click to expand...

Client-side it is called "if validation fails, I don't want to submit
the form" :) And if submission is cancelled, then all form elements
have the states they have.

To cancel form submission, form onsubmit intinsic event handler has to
return false. This way:

<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function validate(frm) {
var ret = true;
if (frm.data.value == '') {
ret = false;
}
// other checks
// more checks
return ret;
}
</script>
</head>
<body>
<form name="MyForm"
method="POST" action="someURL"
onsubmit="return validate(this)">
<input type="text" name="data">
<input type="submit">
</body>
</html>

For a particular type of validation there is a great number of modules
written. Google for "javascript form validation" or look for a sample
at:
<http://www.mattkruse.com/javascript/validations/>

P.S. There is a silly fashion recently (brought by ASP coders AFAICT)
to serve "minimum code" instead of normal HTML pages, like say
<form>...</form> blocks only without html, head and body. While browser
error correction mechanics makes such "pages" still usable, client-side
DOM scripting can get nucked or damaged, in the particular with form
handling. I'm *not* saying at all that you are doing something like
that, just an abstract mention.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Registration Form 7
C# MVC Razor page form 0
Multiple dynamic combo boxes 3
Populating Combo Boxes 2
Code to fill a form 1
Why is this WordPress comments form not submitting? 1
Mandatory Elements To Conduct JavaScript Form Manipulation 7
Combo Boxes questions 0

Members online

No members online now.
Total: 27 (members: 1, guests: 26)
Robots: 433

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top