I am in the process of writing a contact form. I have two JavaScript functions in the head (I will move them later, but that is another question).
The first function, Validate(), for the onblur event works, but not as I'd like it to. The second function, formValidate(), for the onsubmit event works.
I have a switch statement in a JavaScript function to use in an HTML onblur event.
The JavaScript code:
<head>
<script type="text/javascript">
function Validate()
{
// Create array containing textbox elements
var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email12'), document.getElementById('message')];
// Loop through each element to see if value is empty
for (var i = 0; i<input.length; i++)
{
if (input[i].value == '')
{
switch( input[i].id){
case 'fname':
alert ('enter you first name');
break;
case 'lname' :
alert ('enter your last name');
break;
case 'email1':
alert ('enter your email address');
break;
case 'email2':
alert ('enter your email address');
break;
case 'message':
alert ('write your message');
break;
}
}
}
}
function formValidate()
{
// Create array containing textbox elements
var inputs = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')];
var error;
// Loop through each element to see if value is empty.
for(var i = 0; i<inputs.length; i++)
{
if(inputs[i].value == '')
{
error = 'Please plete all fields.';
alert(error);
return false;
}
}
}
</script>
</head>
The HTML:
<form onsubmit="return formValidate()" action="mailto:[email protected]" method="post" id="contactForm" >
<fieldset>
<dl>
<dt> First Name:</dt>
<dd>
<input class="input" type="text" name="fname" id="fname" onblur="Validate()" />
</dd>
<dt> Last Name:</dt>
<dd>
<input class="input" type="text" name="lname" id="lname" onblur="Validate()"/>
</dd>
<dt> Email Address:</dt>
<dd>
<input class="input" type="text" name="email1" id="email1" onblur="Validate()"/>
</dd>
<dt> Email Address:</dt>
<dd>
<input class="input" type="text" name="email2" id="email2" onblur="Validate()"/>
</dd>
<dt> Message:</dt>
<dd>
<textarea name="address" id="address" rows="10" cols="10" onblur="Validate()"></textarea>
</dd>
<dd>
<input type="submit" value="submit" name="submit" />
</dd>
</dl>
</fieldset>
</form>
The code works, except for this: When I click on a field, I get the following alert:
If I click, prevent pop ups, the alerts stop entirely. If I click OK, it goes to the next field, eg from fname to lname, and continues through the fields, preventing the user from entering any data.
How do I fix this problem?
I am in the process of writing a contact form. I have two JavaScript functions in the head (I will move them later, but that is another question).
The first function, Validate(), for the onblur event works, but not as I'd like it to. The second function, formValidate(), for the onsubmit event works.
I have a switch statement in a JavaScript function to use in an HTML onblur event.
The JavaScript code:
<head>
<script type="text/javascript">
function Validate()
{
// Create array containing textbox elements
var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email12'), document.getElementById('message')];
// Loop through each element to see if value is empty
for (var i = 0; i<input.length; i++)
{
if (input[i].value == '')
{
switch( input[i].id){
case 'fname':
alert ('enter you first name');
break;
case 'lname' :
alert ('enter your last name');
break;
case 'email1':
alert ('enter your email address');
break;
case 'email2':
alert ('enter your email address');
break;
case 'message':
alert ('write your message');
break;
}
}
}
}
function formValidate()
{
// Create array containing textbox elements
var inputs = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')];
var error;
// Loop through each element to see if value is empty.
for(var i = 0; i<inputs.length; i++)
{
if(inputs[i].value == '')
{
error = 'Please plete all fields.';
alert(error);
return false;
}
}
}
</script>
</head>
The HTML:
<form onsubmit="return formValidate()" action="mailto:[email protected]" method="post" id="contactForm" >
<fieldset>
<dl>
<dt> First Name:</dt>
<dd>
<input class="input" type="text" name="fname" id="fname" onblur="Validate()" />
</dd>
<dt> Last Name:</dt>
<dd>
<input class="input" type="text" name="lname" id="lname" onblur="Validate()"/>
</dd>
<dt> Email Address:</dt>
<dd>
<input class="input" type="text" name="email1" id="email1" onblur="Validate()"/>
</dd>
<dt> Email Address:</dt>
<dd>
<input class="input" type="text" name="email2" id="email2" onblur="Validate()"/>
</dd>
<dt> Message:</dt>
<dd>
<textarea name="address" id="address" rows="10" cols="10" onblur="Validate()"></textarea>
</dd>
<dd>
<input type="submit" value="submit" name="submit" />
</dd>
</dl>
</fieldset>
</form>
The code works, except for this: When I click on a field, I get the following alert:
If I click, prevent pop ups, the alerts stop entirely. If I click OK, it goes to the next field, eg from fname to lname, and continues through the fields, preventing the user from entering any data.
How do I fix this problem?
Share Improve this question edited Dec 23, 2013 at 19:41 Peter Mortensen 31.6k22 gold badges110 silver badges133 bronze badges asked Jun 13, 2013 at 14:22 user3956566user39565662 Answers
Reset to default 3I think this is what you want:
Demo
Instead of validating all inputs onblur, just validate the one that left focus. To do that I have passed in the element to Validate(this) in the HTML inline code. You also had some element ID issues (e.g. no message field). I also added a .focus() call to keep the input in focus if it's invalid.
function Validate(elem) {
// create array containing textbox elements
var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')];
for (var i = 0; i < input.length; i++)
// loop through each element to see if value is empty
{
if (input[i].value == '' && elem.id == input[i].id) {
switch (input[i].id) {
case 'fname':
alert('enter you first name');
break;
case 'lname':
alert('enter your last name');
break;
case 'email1':
alert('enter your email address');
break;
case 'email2':
alert('enter your email address');
break;
case 'message':
alert('write your message');
break;
}
elem.focus();
}
}
}
I have to say though that lots of alert()'s are pretty nasty, it would be much better if you show a span next to each textbox with the error message instead.
I'm afraid you have to rethink the whole validation code. Next is happening:
- User inputs "First Name"
- Script iterates through
inputarray - round1: is
fnameOK --> yes, nexti - round2: is
lnameOK --> no, show alert - round3: is
email1OK --> no, show alert ...
When this is iterated and the user finally can input the next field, the above loop is executed again, though there will be one alert less per each new loop.
A simple fix would be something like this:
function Validate(id) {
var errors = {
fname: 'enter you first name',
lname: 'enter your last name',
email1: 'enter your email address',
email2: 'enter your email address',
message: 'write your message'
};
if (document.getElementById(id).value === '') {
if (id in errors) {
alert(errors[id]);
}
}
return;
}
In HTML just pass the corresponding id to Validate():
<input class="input" type="text" name="fname" id="fname" onblur="Validate('fname')" />
However, I'd find this annoying behavior. It would be more fortable, if you made the validation on submit, and cancel submit, if there are empty fields.