Form Validation

[YNWA]

I need to add a minimum password length to my registration form and also make the form validate if the email address entered is a valid email address.

 

Here is my script code:

<script>
function validate()
{

var email = document.getElementById("userEmail").value;

if (!preg_match "/^([a-z0-9._-](\+[a-z0-9])*)+@[a-z0-9.-]+\.[a-z]{2,6}$/i", $email))
{
  // Not a valid email address
}
    {
    window.alert("Please Insert a Valid Email Address");
    return false;
    }
    else
    {
    
var password = document.getElementById("userPassword").value;

            if ((password == null) || (password == ""))
            {
            window.alert("Please Insert a Valid Password");
            return false;
            }
            else
            {
            
var passwordconfirm = document.getElementById("userConfirmPassword").value;

            if ((password) != (passwordconfirm)) 
					{
                        alert("Passwords do not match!");
                        form1.userPassword.focus();
                        return false;
                        }
                        else
                        {

var firstname = document.getElementById("userFName").value;

                                    if ((firstname == null) || (firstname == ""))
                                    {
                                    window.alert("Please Insert a Valid First Name");
                                    return false;
                                    }
                                    else
                                    {

var surname = document.getElementById("userSName").value;

                                        if ((surname == null) || (surname == ""))
                                        {
                                        window.alert("Please Insert a Valid Surname");
                                        return false;
                                        }
                                    }
                                
                        }            
            }                  
    }         
}
</script>

 

 

And here is my form

<?php

function display_form($userFName="", $userSName="", $userPassword="", $userConfirmPassword="", $user="")
{

$display = "<form id=\"form1\" name=\"form1\" method=\"post\" onSubmit=\"return validate($_POST)\" action=\"$SERVER[php_SELF]\">

     <table width=\"322\" border=\"0\">
  <tr>
    <td width=\"147\">User Email</td>
    <td width=\"159\"><label>
      <input type=\"text\" name=\"userEmail\" id=\"userEmail\" value=\"\" />
    </label></td>
  </tr>
  <tr>
    <td>Forename</td>
    <td><label>
      <input type=\"text\" name=\"userFName\" id=\"userFName\" value=\"$userFName\" />
    </label></td>
  </tr>
  <tr>
    <td>Surname</td>
    <td><label>
      <input type=\"text\" name=\"userSName\" id=\"userSName\" value=\"$userSName\" />
    </label></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><label>
      <input type=\"password\" name=\"userPassword\" id=\"userPassword\" value=\"$userPassword\" />
    </label></td>
  </tr>
  <tr>
    <td>Confirm Password </td>
    <td><label>
      <input type=\"password\" name=\"userConfirmPassword\" id=\"userConfirmPassword\" value=\"$userConfirmPassword\"  />
    </label></td>
  </tr>

</table>
  	<input type=\"hidden\" name=\"op\" value=\"yes\">
	<input type=\"submit\" name=\"submit\" value=\"Submit\">
	<input type=\"reset\" name=\"reset\" value=\"Reset\">
</form>";


  
  
echo $display;

 

Where am I going wrong?

 

Thanks

[haku]

Where am I going wrong?

 

Well for starters, you didn't tell us what the problem was, or ask any question other than the one I'm quoting.

[YNWA]

I need to add a minimum password length to my registration form and also make the form validate if the email address entered is a valid email address.

 

The problem is that I can put any email address such as 111.com and it registers. I want to to say 'Not Valid Email' etc...

 

The password works to confirm both are the same, but a user can enter any password, eg. 1 character long. I want it to set a minimum length of say 5 characters and 1 number.

[YNWA]

Anyone help me out?

[Psycho]

Well, I have no clue what you are trying to accomplish by having this in your FORM tag:

onSubmit=\"return validate($_POST)\"

 

First off $_POST would be an array in PHP and could not be made available to JavaScript in that fashion. Remember the FORM posts to a PHP page not to the JavaScript. Just change that line to this:

onSubmit=\"return validate()\"

 

And change your JavaScript validation to this:

<script type="text/javascript">

function validate()
{

    var email = document.getElementById("userEmail");
    if (!validEmail(email.value))
    {
        alert("Please Insert a Valid Email Address");
        email.focus();
        return false;
    }
    
    var password = document.getElementById("userPassword");
    if (!$password.value || password.value.length<6) //Use minimum length here
    {
        alert("Please Insert a Valid Password");
        password.focus();
        return false;
    }

    var passwordconfirm = document.getElementById("userConfirmPassword");
    if (password.value != passwordconfirm.value)
    {
        alert("Passwords do not match!");
        password.focus();
        return false;
    }

    var firstname = document.getElementById("userFName");
    if (!firstname.value)
    {
        alert("Please Insert a Valid First Name");
        firstname.focus();
        return false;
    }

    var surname = document.getElementById("userSName");
    if (!surname.value)
    {
        window.alert("Please Insert a Valid Surname");
        surname.focus();
        return false;
    }

    return true;
}

function validEmail(emailStr) {
    validEmailRegEx = /^[\w\+-]+([\.]?[\w\+-])*@[a-zA-Z0-9]{2,}([\.-]?[a-zA-Z0-9]{2,})*\.[a-zA-Z]{2,4}$/
    return emailStr.match(validEmailRegEx)
}

</script>

[YNWA]

Thanks you for your help, valid email address now works.

 

I am new to PHP so learning step by step. I find it hard to understand the code at time. Just doesnt click sometimes.

 

For the password length function, it is still allowing any password length to be entered. What is needed to make it 6 or more characters?

 

Also for the email address function, if my site is for university students only, can I set a validation to only accept email entries with '@hope.ac.uk' at the end? As all student Uni email address is for example 123456 @ hope.ac.uk

 

Cheers for your excellent help.

 

Well, I have no clue what you are trying to accomplish by having this in your FORM tag:

onSubmit=\"return validate($_POST)\"

 

First off $_POST would be an array in PHP and could not be made available to JavaScript in that fashion. Remember the FORM posts to a PHP page not to the JavaScript. Just change that line to this:

onSubmit=\"return validate()\"

 

And change your JavaScript validation to this:

<script type="text/javascript">

function validate()
{

    var email = document.getElementById("userEmail");
    if (!validEmail(email.value))
    {
        alert("Please Insert a Valid Email Address");
        email.focus();
        return false;
    }
    
    var password = document.getElementById("userPassword");
    if (!$password.value || password.value.length<6) //Use minimum length here
    {
        alert("Please Insert a Valid Password");
        password.focus();
        return false;
    }

    var passwordconfirm = document.getElementById("userConfirmPassword");
    if (password.value != passwordconfirm.value)
    {
        alert("Passwords do not match!");
        password.focus();
        return false;
    }

    var firstname = document.getElementById("userFName");
    if (!firstname.value)
    {
        alert("Please Insert a Valid First Name");
        firstname.focus();
        return false;
    }

    var surname = document.getElementById("userSName");
    if (!surname.value)
    {
        window.alert("Please Insert a Valid Surname");
        surname.focus();
        return false;
    }

    return true;
}

function validEmail(emailStr) {
    validEmailRegEx = /^[\w\+-]+([\.]?[\w\+-])*@[a-zA-Z0-9]{2,}([\.-]?[a-zA-Z0-9]{2,})*\.[a-zA-Z]{2,4}$/
    return emailStr.match(validEmailRegEx)
}

</script>

[YNWA]

Also the validation is no longer recognising that incorrect passwords are not the same? ANy user can enter any password, then confirm password using a totally different password.

 

Anyone got any ideas on this?

[Psycho]

Sorry, been out for a bit.

 

OK, the problem was that I mixed up PHP and JavaScript variable conventions. I used $password (withthe dollar sign) in one instance of the javascript variables.

 

In addition to that fix, I added the additional check for the proper domain on the email address.

 

<script type="text/javascript">

function validate()
{

    var email = document.getElementById("userEmail");
    if (!validEmail(email.value))
    {
        alert("Please Insert a Valid Email Address");
        email.focus();
        return false;
    }

    var firstname = document.getElementById("userFName");
    if (!firstname.value)
    {
        alert("Please Insert a Valid First Name");
        firstname.focus();
        return false;
    }

    var surname = document.getElementById("userSName");
    if (!surname.value)
    {
        window.alert("Please Insert a Valid Surname");
        surname.focus();
        return false;
    }

    var password = document.getElementById("userPassword");
    if (!password.value || password.value.length<6) //Use minimum length here
    {
        alert("Please Insert a Valid Password of 6 characters or more.");
        password.focus();
        return false;
    }

    var passwordconfirm = document.getElementById("userConfirmPassword");
    if (password.value != passwordconfirm.value)
    {
        alert("Passwords do not match!");
        password.focus();
        return false;
    }

    return true;
}


function validEmail(emailStr) {
    validEmailRegEx = /^[\w\+-]+([\.]?[\w\+-])*@hope.ac.uk$/
    return emailStr.match(validEmailRegEx);
}

</script>