PDA

View Full Version : Blank Form Field

j_miguel_y
05-26-2004, 03:24 PM
I have a signup page in which people insert their personal info. However, I want to know if the is a simple script that will warn them of a blank field, and prevent them from proceding to the next page. IE warning message, ect.
agent002
05-26-2004, 03:34 PM
Hi Miguel, welcome to HTMLForums! :)
Yes, you can use a little JavaScript to do that. Put this code between the <head> and </head> tags of the page:
<script type="text/javascript">
// form validator by agent002

function alertField(form, f){
var fname;
if(typeof(f) == 'string') fname = f;
else fname = f.name;
fname = fname.charAt(0).toUpperCase() + fname.substring(1, fname.length);
alert('Please enter a value in '+fname);
if(typeof(f) !== 'string'){
f.focus();
return false;
}
for(var i = 0; i < form.elements.length; i++){
if(form.elements[i].name && form.elements[i].name == f){
form.elements[i].focus();
return false;
}
}
}

function validateForm(form){
var radioGroups = new Array();
for(var i = 0; i < form.elements.length; i++){
if((form.elements[i].tagName.toLowerCase() == 'select' ||
form.elements[i].tagName.toLowerCase() == 'textarea' ||
(form.elements[i].tagName.toLowerCase() == 'input' &&
(form.elements[i].type.toLowerCase() == 'text' ||
form.elements[i].type.toLowerCase() == 'file'))) &&
form.elements[i].className.indexOf('notRequired') < 0 &&
form.elements[i].value == ''){
alertField(form, form.elements[i]);
return false;
}
else if(form.elements[i].className.indexOf('checkEmail') >= 0 &&
form.elements[i].value !== '' &&
form.elements[i].value.match(/^([\w\-]+\.?)+\@([\w\-]+\.{1})+(com|net|org|edu|int|mil|gov|biz|info|aero|museum|name|coop|\w{2})$/) == null){
alert('Please enter a valid email address.');
form.elements[i].focus();
return false;
}
else if(form.elements[i].tagName.toLowerCase() == 'input' &&
form.elements[i].type.toLowerCase() == 'checkbox' &&
form.elements[i].className.indexOf('notRequired') < 0 &&
!form.elements[i].checked){
alert('You need to agree to our TOS.');
form.elements[i].focus();
return false;
}
else if(form.elements[i].tagName.toLowerCase() == 'input' &&
form.elements[i].type.toLowerCase() == 'radio' &&
!radioGroups[form.elements[i].name] &&
radioGroups[form.elements[i].name] !== null &&
form.elements[i].className.indexOf('notRequired') < 0){
var t = (form.elements[i].checked)? true : null;
radioGroups[form.elements[i].name] = t;
}
else if(form.elements[i].tagName.toLowerCase() == 'input' &&
form.elements[i].type.toLowerCase() == 'radio' &&
(radioGroups[form.elements[i].name] ||
radioGroups[form.elements[i].name] == null) &&
form.elements[i].className.indexOf('notRequired') < 0){
if(form.elements[i].checked) radioGroups[form.elements[i].name] = true;
}
}
for(var i in radioGroups){
if(!radioGroups[i]){
alertField(form, i);
return false;
}
}
return true;
}

</script>

That one is quite advanced and does more than you need it to, but isn't that hard to use. You only need to add this attribute to the <form> tag:
onsubmit="return validateForm(this);"
and there it is. It checks through all fields when submitting and gives you an alert if a field is blank.

If there is a field that isn't required (can be left blank), add class="notRequired" to its <input>, <select>, <textarea> or whatever tag. If it is an email input, and you would like the email address validated, add class="checkEmail" to its tag.

Sample usage:
<form method="post" action="about:blank" onsubmit="return validateForm(this);">
NAME: <input type="text" name="name"><br>
EMAIL: <input type="text" name="email" class="checkEmail"><br>
SUBJECT: <input type="text" name="subject"><br>
COMMENT:<br><textarea cols="44" rows="12" name="comments"></textarea><br>

OPINION:<br><input type="radio" name="opinion" value="good"> Good<br>
<input type="radio" name="opinion" value="ok"> Ok<br>
<input type="radio" name="opinion" value="bad"> Bad<br><br>

AGREE TO TOS: <input type="checkbox" name="tos"><br><br>

<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

Please notice that the user may have JavaScript turned off in his browser, and the form script won't work then. So you should always have your server side script check the input values too.