javascript form validation error

[garyjohnson]

This is my java code, all the id's are the ids of divs on the page. They are all labeled respectiviley. It takes the input of the form. There are six possble errors that can occur which are, the emails dont match. First name contains characters other than letters, last name contains characters other than letters, passwords dont match, password is less than six characters, and the p number has an error.

var emailError = 0
var first_nameError = 0
var last_nameError = 0
var pError = 0
var passwordError = 0
var passwordError2 = 0

function hideDiv() { 
if (document.getElementById) {
document.getElementById('password2_error_wrapper').style.display = 'none'; 
document.getElementById('password_error_wrapper').style.display = 'none';
document.getElementById('email_error_wrapper').style.display = 'none';
document.getElementById('p_error_wrapper').style.display = 'none';
document.getElementById('f_error_wrapper').style.display = 'none';
document.getElementById('l_error_wrapper').style.display = 'none';

} 
}
function showEmailError() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('email_error_wrapper').style.display = 'block'; 
} 
} 
function showFirst_nameError() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('f_error_wrapper').style.display = 'block'; 
} 
}
function showLast_nameError() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('l_error_wrapper').style.display = 'block'; 
} 
}
function showPError() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('p_error_wrapper').style.display = 'block'; 
} 
}
function showPasswordError() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('password_error_wrapper').style.display = 'block'; 
} 
}
function showPassword2Error() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('password2_error_wrapper').style.display = 'block'; 
} 
}
function validateForm() {
    validateFirst_name(form.first_name.value)
    validateLast_name(form.last_name.value)
    validatePlate_number(form.p_number.value)
    validateState(form.state.value)
    validateEmail(form.email.value)
    validatePassword(form.password.value)
if (emailError = 1) { showEmailError(); return false }
if (first_nameError = 1) { showFirst_nameError(); return false }
if (last_nameError = 1) { showLast_nameError(); return false }
if (pError = 1) { showPError(); return false }
if (passwordError = 1) { showPasswordError(); return false }
if (passwordError2 = 1) { showPassword2Error(); return false }
else { return true }
}

function validateFirst_name(field) {
    p = field.compile("[^A-Za-z]");
if (p.matcher(field).find()) {
    first_nameError = 1
}
}
function validateLast_name(field) {
     p = field.compile("[^A-Za-z]");
    if (p.matcher(field).find()) {
    last_nameError = 1
}
}
function validatePlate_number(field) {
   pp = field.delete("^a-zA-Z0-9")
   if (pp = ""){
        pError = 1;   
   }
   else if (pp.length < 3){
        pError = 1;   
   }
}
function validateEmail(field) {
    email1 = field.toLowerCase()
    temp_email = form.retype_email.value
    email2 = temp_email.toLowerCase()
    if (email != email2){ emailError = 1;}
    return ""
}
function validatePassword(field) {
    password1 = field
    password2 = form.retype_password.value 
    if (field.length < 6){
        passwordError = 1;
    }   
    if (password1 != password2 ){
        passwordError2 = 1;
    }
    return ""
}

It is not catching anny errors and just send the script right through. What is wrong with the code?

[code739]

did you see some javascript errors
have you tried using browser development tools to see some javascript error..
like firefox just press ctrl+shifg+j

[LastMitch]

@garyjohnson

It is not catching anny errors and just send the script right through. What is wrong with the code?

Can you post your form?

It should look like this when you submit the data:

<form name="validation" method="post" onSubmit="validate(this)"> 

[garyjohnson]

This is my form, I have not tried using the javascript error finder because im not familar with it.

<form name="validate" method="post" action="signupform.php" style="padding-right:0px;" onSubmit="return validateForm(this)">
<div class="signupfl">
  <input placeholder="First Name" type="text" name="first_name" maxlength="50" size="10" class="inputdesign" required>
  <input placeholder="Last Name" type="text" name="last_name" maxlength="50" size="15" style="padding-right:6px;" class="inputdesign" required>
</div>

<div id="f_error_wrapper" class="f_error_wrapper">
<div class="f_error"id="f_error_wrapper" >
*First name can only contain letters
</div>
</div>
<div class="l_error_wrapper" id="l_error_wrapper">
<div class="l_error" id="l_error_wrapper">
*Last name can only contain letters
</div>
</div>

<div class="longinput">
<input placeholder="Number" type="text" name="p_number" maxlength="20" size="18" class="inputdesign" required="required">
<div id="p_error_wrapper" class="p_error_wrapper">
    <div class="p_error" id="p_error_wrapper" >
    *number was entered incorrectly
    </div>
    </div>
</div>
<div class="longinput">
  <input placeholder="Email" type="email" name="email" maxlength="80" size="33" class="inputdesign" required>
  </div>
  <div class="longinput">
  <input placeholder="Re-type Email" type="email" name="retype_email" maxlength="80" size="33"class="inputdesign" required>
  </div>
  <div id="email_error_wrapper" class="email_error_wrapper">
    <div class="email_error" id="email_error_wrapper" >
    *Emails do not match!
    </div>
    </div>
  <div class="longinput">
  <input placeholder="Password" type="password" name="password" maxlength="15" size="33" class="inputdesign" required>
  </div>
  <div class="longinput">
  <input placeholder="Re-type Password" type="password" name="retype_password" maxlength="15" size="33" class="inputdesign" required>
  </div>
  <div id="password_error_wrapper" class="password_error_wrapper">
    <div class="password_error" id="password_error_wrapper" >
    *Passwords do not match!
    </div>
    </div>
    <div id="password2_error_wrapper" class="password2_error_wrapper">
    <div class="password2_error" id="password2_error_wrapper" >
    *Passwords must be at least 6 characters
    </div>
    </div>
</form

[LastMitch]

@garyjohnson

You're getting close of making the message appear. But can not you rush this. I feel you rush into this.

Let's try some thing simple:

Let's try first_nameError

<script language="javascript">
function validateForm(){
var first_name = document.form.first_name.value;
first_name = first_name.trim(); 
if (first_name == '') {
alert("Please enter your first name again.");
document.form.first_name.focus();
return false;
}
}
</script> 

Here's your form:

<form action="validate.php" method="post" name="form" id="form" onSubmit="validateForm('first_name')">
<input name="first_name" type="text" id="first_name" size="30" />    
<input name="Submit" id="Submit" onClick="validateForm('first_name')" value="Next" type="Submit"> 

By doing this it will tell whether your function validateForm() working or not. If it works then there's nothing wrong with the function validateForm() if it doesn't work then you know it's function validateForm() fault or issue.

[stultuske]

first thing to check: is your javascript enabled in your browser? that's one big problem when using client side validation: the user can disable it.

[garyjohnson]

The javascript is enabled, I am using google chrome. I also have php validation on the sever side but I want javascript validation because its easier for the user.

LastMitch I have tried that exact code and it works, it makes an alert box pop up but after I click okay it passes the form through to validation php.

[garyjohnson]

I fixed it so it doesnt pass the form through, I added return in from of the function
<form action="validate.php" method="post" name="form" id="form" onSubmit="return validateForm('first_name')">

[LastMitch]

@garyjohnson

LastMitch I have tried that exact code and it works, it makes an alert box pop up but after I click okay it passes the form through to validation php.

Well, you should validated it in all Javascript instead of PHP mixed with it. I always used PHP as a form to submit & validate but I don't validated it in Javascript as much even though I test it out and it works.

I fixed it so it doesnt pass the form through, I added return in from of the function

Does that fixed the issue that all your info is passing through the form and being validate?

[garyjohnson]

I sanatize it in the php and validate it if JavaScript is disabled but yes the code works fine now thank you so muchmuch!

[LastMitch]

@garyjohnson

I sanatize it in the php and validate it if JavaScript is disabled but yes the code works fine now thank you so muchmuch!

That's nice if you did sanatize it in the php and validate it. It's great to hear that you solve it! Can you click Solve so the thread is close and I don't want people add stuff to your thread. Thanks.

[garyjohnson]

Yup, will do! Thanks again!