Form validation using javascript, validates only the first field even though it should be validating both

Question

I have a simple form which is echoed using php:

echo '<form action="" method="POST" name="newTicket" onsubmit="return validateForm(this)">

<label>Full name*:</label><input type="text" style="width:50%" name="ticket_user_fullname" placeholder="Full name..." > <br /><br />

<label>Email address*:</label><input type="text" style="width:50%" name="ticket_user_email" placeholder="[email protected]..." >

<input class="btn" type="submit" name="submit" value="submit" >

</form>';

The form calls the validateForm function correctly. This is the validateForm function and the relating functions:

function validateForm(form){

var reason = "";

reason += validateFullname(form.ticket_user_fullname);
reason += validateEmail(form.ticket_user_email);

  if (reason != "") {
    alert("Some fields need correction:\n" + reason);
    return false;
  }
  return true;
}

function validateFullname(ticket_user_fullname)
{
error = "";
var re = /^[a-zA-Z ]*$/;    

if(ticket_user_fullname.value == "" || ticket_user_fullname.value == null) {
    error = "Full name must not be empty. \n";
    ticket_user_fullname.style.border="1px solid red";
}else if(!re.test(ticket_user_fullname.value)){
    error = "Your name cannot contain numbers or special characters. \n"
    ticket_user_fullname.style.border="1px solid red";
}else{
form.ticket_user_fullname.style.border="1px solid #cccccc";
}       

return error;
}

function validateEmail(ticket_user_email)
{
error = "";
var re = /\S+@\S+\.\S+/;

if(ticket_user_email.value == "" || ticket_user_email.value == null) {
    error = "Email must not be empty. \n";
    ticket_user_email.style.border="1px solid red";
}else if(!re.test(ticket_user_email.value)){
    error = "Your email must be in the format: [email protected]. \n"
}else{
ticket_user_email.style.border="1px solid #cccccc";
}   

return error;
}

The form is validated correctly when nothing is entered into the full name field, or when there is a number entered into the full name field. When there is a correct string input, it ignores the validation on the rest of the form and the form is submitted.

what should happen is all data in all of the fields should be correct before submission.

R Lam · Accepted Answer · 2015-05-05 07:13:51Z

1

In your function validateFullname(ticket_user_fullname)

form.ticket_user_fullname.style.border="1px solid #cccccc";

It should be ticket_user_fullname.style.border="1px solid #cccccc";

Some error should be made in your form.

answered May 5, 2015 at 7:13

R Lam

4032 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mgrantnz Over a year ago

@R Lam - Thank you kindly, it's funny how little things like that can mess everything up :)

Collectives™ on Stack Overflow

Form validation using javascript, validates only the first field even though it should be validating both

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related