Forum Moderators: open
I have a little annoying problem. I want one field in my form to be required. The java script shows "Please Enter a Zip Code" if this field is blank, but it still takes you to the results. Is there a way to make it cancel the "submit" if the required field is not filled out?
Script I'm using:
<head>
<script type='text/javascript'>
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
</script>
</head>
<form name="search_form" method="get" action="results_list.php" onSubmit="return validateform()" onclick="notEmpty(document.getElementById('req1'), 'Please Enter a Zip Code')"value='Check Field'>
Zip code: <input type="Text" value="" name="zip" size="12" maxlength="7" id='req1'>
<input class="submit" type="Submit" value="Go">
</form>
[edited by: bquick at 11:30 pm (utc) on May 13, 2009]
I'd incorporate the notEmpty function into the validateform function.
And please don't include personal URLs when posting.
Because I thought this was my not empty function
<script type='text/javascript'>
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
</script>
First, you don't put "onClick" into a form. If you use onClick, it should be an element that you click: anchor, button . . . .
Second, understand the effect of return false in the context of returning false from a function. When you return false from a function, it tells the browser to not allow the element to perform it's natural action.
<a href="#" onClick="return false">I won't navigate anywhere if Javascript is enabled</a>
<form action="" onSubmit="return false">
I won't sumit if Javascript is enabled
</form>
So understanding this concept, you return false from the function. Pass the form object to validateform() and allow Javascript to manage the submit if the fields don't pass validation. There's no reason to return true from this scenario.
By allowing JS to manage the submit, if JS is disabled the form will still work.
Last, you should always try to remove inline JS and CSS to the external style sheets, making for cleaner code and easier maintenance.
Working example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<!-- doctype all on one line -->
<html lang="en">
<head>
<script type="text/javascript">
window.onload=function() {
if (document.getElementById) {
document.getElementById('search_form').onsubmit=function() { return validateform(this); };
}
};
function validateform (form) {
var requireds = Array('req1','req2');
var eng = Array ('postal code','city');
var msg = '';
for (i=0;i<requireds.length;i++) {
if (document.getElementById(requireds[i]).value=='') {
msg += 'Please enter your ' + eng[i] + '.\n';
}
}
if (msg != '') { alert(msg); }
else { form.submit(); }
return false;
}
</script>
</head>
<body>
<form name="search_form" id="search_form" method="get" action="results_list.php">
<p>
<label for="req2">City:</label>
<input type="Text" value="" name="city" id="req2" size="12" maxlength="25">
</p>
<p>
<label for="req1">Zip code:</label>
<input type="Text" value="" name="zip" id="req1" size="12" maxlength="7">
</p>
<p><input class="submit" type="Submit" value="Go"></p>
</form>
</body>
</html>
