469,347 Members | 22,107 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,347 developers. It's quick & easy.

Form validation and combo boxes

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!

Nov 22 '06 #1
2 4118
ddog wrote:
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.
<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,

--
Bart

Nov 22 '06 #2
VK

ddog wrote:
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>
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>...</formblocks 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.

Nov 22 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by Neil | last post: by
2 posts views Thread by misschristalee | last post: by
2 posts views Thread by Sean | last post: by
2 posts views Thread by Mr Man | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.