How to validate form in jQuery and PHP
<p>I have a registration form that I want to validate using jQuery and than pass it to PHP to login if all details are correct.</p>

<p>I am trying to use Yendesigns form - <a href="http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/" rel="nofollow">http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/</a></p>

<p>My form code is:</p>

<pre><code>&lt;?php

require_once("includes/initialise.php");

if (isset($_POST['resetpassword']) &amp;&amp; $_POST['resetpassword'] == 'resetnow') {
    $required = array('first_name','last_name','username','email','password','password2');
    $missing = array();
    $validation = array(
        'first_name'    =&gt; 'Please provide your first name',
        'last_name'     =&gt; 'Please provide your last name',
        'username'      =&gt; 'Please provide your username',
        'email'         =&gt; 'Please provide your valid email address',
        'password'      =&gt; 'Please provide your password',
        'password2'     =&gt; 'Please confirm your password',
        'userdup'       =&gt; 'Username already registered',
        'emaildup'      =&gt; 'Email address already registered',
        'mismatch'      =&gt; 'Passwords do not match'
    );

//Sanitise and clean function
$first_name = escape($_POST['first_name']);
$last_name = escape($_POST['last_name']);
$username = escape($_POST['username']);
$email = escape($_POST['email']);
$password = escape($_POST['password']);
$password2 = escape($_POST['password2']);

    foreach($_POST as $key =&gt; $value) {
        $value = trim($value);
        if(empty($value) &amp;&amp; in_array($key,$required)) {
            array_push($missing,$key);
        } else {
            ${$key} = escape($value);
        }
    }

    if($_POST['email'] !="" &amp;&amp; getDuplicate(1,'email','clients','email',$email)) {
        array_push($missing,'emaildup');
    }

    if($_POST['username'] !="" &amp;&amp; getDuplicate(1,'username','clients','username',$username)) {
        array_push($missing,'userdup');
    }

    // Check User Passwords
    if( strcmp($_POST['password'], $_POST['password2']) != 0 ) {
        array_push($missing,'mismatch');
    }

    //validate email address
    if(!empty($_POST['email']) &amp;&amp; !isEmail($_POST['email'])) {
        array_push($missing,'email');       
    }

    if(!empty($missing)) {
        $before = " &lt;span class=\"errorred\"&gt;";
        $after = "&lt;/span&gt;";
        foreach($missing as $item)
            ${"valid_".$item} = $before.$validation[$item].$after;
    } else {    
// stores MD5 of password
$passmd5 = md5($_POST['password']);

// stores clients IP addresss   
$user_ip = $_SERVER['REMOTE_ADDR'];
// Automatically collects the hostname or domain  like example.com) 
$host  = $_SERVER['HTTP_HOST'];
$host_upper = strtoupper($host);
$path   = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');

$date = date('Y-m-d');
$time = date('H:i:s');

// Generates activation code simple 4 digit number
$hash = mt_rand().date('YmdHis').mt_rand();

//Insert Data
$sql = "INSERT INTO clients(first_name, last_name, username, email, password, date, time, `hash`)
        VALUES ('{$first_name}','{$last_name}','{$username}','{$email}','$passmd5','$date', '$time','$hash')";

$result = mysql_query($sql, $conndb) or die(mysql_error());

if($result)  {

        $to = $_POST['email'];
        $subject = 'Activate your account';
        $from = 'dummy@emailaddress.co.uk';

        $headers = "MIME-Version: 1.0\r\n";
        $headers .= "Content-type:text/html;charset=UTF-8\r\n";
        $headers .= "From: My Website Name &lt;".$from."&gt;\r\n";
        $headers .= "Reply-to: My Website Name &lt;".$from."&gt;\r\n";

        $message = '&lt;div style="font-family:Arial, Verdana, Sans-serif; color:#333; font-size:12px"&gt;
        &lt;p&gt;Thank you for registering on our website&lt;/p&gt;
        &lt;p&gt;Please click on the following link to activate your account: 

        &lt;a href="http://'.$host.''.$path.'/activate.php?id='.$hash.'"&gt;http://'.$host.''.$path.'/activate.php?id='.$hash.'&lt;/a&gt;&lt;/p&gt;

        &lt;p&gt;Here are your login details...&lt;/p&gt;
        &lt;p&gt;User Name: '.$username.'&lt;/p&gt;
        &lt;p&gt;Email: '.$email.' &lt;/p&gt;
        &lt;p&gt;Passwd: '.$password.' &lt;/p&gt;

        &lt;/p&gt;&lt;/div&gt;';

        if (mail($to, $subject, $message, $headers)) {

            $confirmation = '&lt;p&gt;Thank you.&lt;br /&gt;You have successfully registered.&lt;/p&gt;';

        } else {

            $confirmation = '&lt;p&gt;Error.&lt;br /&gt;Your activation link could not be sent.&lt;br /&gt;Please contact administrator.&lt;/p&gt;';
            }
        }
    }
}

require_once("includes/header.php");
?&gt;

        &lt;div class="block"&gt;
            &lt;div class="block_head"&gt;
                    &lt;div class="bheadl"&gt;&lt;/div&gt;
                    &lt;div class="bheadr"&gt;&lt;/div&gt;

                    &lt;h5&gt;Register&lt;/h5&gt;

                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="login.php"&gt;Login&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;

        &lt;/div&gt;      &lt;!-- .block_head ends --&gt;

        &lt;div class="block_content"&gt;

      &lt;?php echo isset($confirmation) ? $confirmation : NULL; ?&gt;

    &lt;form name="register" id="customForm" action="" method="post"&gt;

        &lt;div&gt;
            &lt;label for="first_name"&gt;First Name: * &lt;?php echo isset($valid_first_name) ? $valid_first_name : NULL; ?&gt;&lt;/label&gt;
            &lt;input id="first_name" name="first_name" type="text" class="fld" value="" /&gt;
            &lt;span id="first_nameInfo"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;label for="last_name"&gt;Last Name: * &lt;?php echo isset($valid_last_name) ? $valid_last_name : NULL; ?&gt;&lt;/label&gt;
            &lt;input id="last_name" name="last_name" type="text" class="fld" value="" /&gt;
            &lt;span id="last_nameInfo"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;label for="username"&gt;Username: * &lt;?php echo isset($valid_username) ? $valid_username : NULL; ?&gt; &lt;?php if(isset($valid_userdup)) { echo $valid_userdup; } ?&gt;&lt;/label&gt;
            &lt;input id="username" name="username" type="text" class="fld" value="" /&gt;
            &lt;span id="usernameInfo"&gt;&lt;/span&gt;&lt;span id="status"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;label for="email"&gt;E-mail: * &lt;?php if(isset($valid_email)) { echo $valid_email; } ?&gt; &lt;?php if(isset($valid_emaildup)) { echo $valid_emaildup; } ?&gt;&lt;/label&gt;
            &lt;input id="email" name="email" type="text" class="fld" value="" /&gt;
            &lt;span id="emailInfo"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;label for="pass1"&gt;Password: * &lt;?php if(isset($valid_password)) { echo $valid_password; } ?&gt;&lt;/label&gt;
            &lt;input id="pass1" name="pass1" type="password" class="fld" value="" /&gt;
            &lt;span id="pass1Info"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;label for="pass2"&gt;Confirm Password: * &lt;?php if(isset($valid_password2)) { echo $valid_password2; } ?&gt; &lt;?php if(isset($valid_mismatch)) { echo $valid_mismatch; } ?&gt;&lt;/label&gt;
            &lt;input id="pass2" name="pass2" type="password" class="fld" value="" /&gt;
            &lt;span id="pass2Info"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;input id="send" name="send" type="submit" value="Send" /&gt;
        &lt;/div&gt;

        &lt;/table&gt;
        &lt;input type="hidden" name="resetpassword" value="resetnow" /&gt;
    &lt;/form&gt;
&lt;/div&gt;  

                &lt;!-- .block_content ends --&gt;

                &lt;div class="bendl"&gt;&lt;/div&gt;
                &lt;div class="bendr"&gt;&lt;/div&gt;


                    &lt;/div&gt;

&lt;?php
require_once("includes/footer.php");
?&gt;
</code></pre>

<p>And the jquery is:</p>

<pre><code>/***************************/
//@Author: Adrian "yEnS" Mato Gondelle &amp; Ivan Guardado Castro
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!                  
/***************************/

$(document).ready(function(){
    //global vars
    var form = $("#customForm");
    var first_name = $("#first_name");
    var first_nameInfo = $("#first_nameInfo");
    var last_name = $("#last_name");
    var last_nameInfo = $("#last_nameInfo");
    var email = $("#email");
    var emailInfo = $("#emailInfo");
    var pass1 = $("#pass1");
    var pass1Info = $("#pass1Info");
    var pass2 = $("#pass2");
    var pass2Info = $("#pass2Info");
    var message = $("#message");

    //On blur
    first_name.blur(validateName);
    last_name.blur(validateLastName);
    email.blur(validateEmail);
    pass1.blur(validatePass1);
    pass2.blur(validatePass2);
    //On key press
    first_name.keyup(validateName);
    last_name.keyup(validateLastName);
    pass1.keyup(validatePass1);
    pass2.keyup(validatePass2);
    message.keyup(validateMessage);
    //On Submitting
    form.submit(function(){
        if(validateName() &amp; validateLastName() &amp; validateEmail() &amp; validatePass1() &amp; validatePass2() &amp; validateMessage())
            return true
        else
            return false;
    });

    //validation functions
    function validateEmail(){
        //testing regular expression
        var a = $("#email").val();
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
        //if it's valid email
        if(filter.test(a)){
            email.removeClass("error");
            emailInfo.text("");
            emailInfo.removeClass("error");
            return true;
        }
        //if it's NOT valid
        else{
            email.addClass("error");
            emailInfo.text("Please provide a valid email address");
            emailInfo.addClass("error");
            return false;
        }
    }
    function validateName(){
        //if it's NOT valid
        if(first_name.val().length &lt; 4){
            first_name.addClass("error");
            first_nameInfo.text("Please provide your first name (more than 3 letters)");
            first_nameInfo.addClass("error");
            return false;
        }
        //if it's valid
        else{
            first_name.removeClass("error");
            first_nameInfo.text("");
            first_nameInfo.removeClass("error");
            return true;
        }
    }

    function validateLastName(){
        //if it's NOT valid
        if(last_name.val().length &lt; 4){
            last_name.addClass("error");
            last_nameInfo.text("Please provide your first name (more than 3 letters)");
            last_nameInfo.addClass("error");
            return false;
        }
        //if it's valid
        else{
            last_name.removeClass("error");
            last_nameInfo.text("");
            last_nameInfo.removeClass("error");
            return true;
        }
    }
    function validatePass1(){
        var a = $("#password1");
        var b = $("#password2");

        //it's NOT valid
        if(pass1.val().length &lt;5){
            pass1.addClass("error");
            pass1Info.text("Please provide your password (at least 5 characters)");
            pass1Info.addClass("error");
            return false;
        }
        //it's valid
        else{           
            pass1.removeClass("error");
            pass1Info.text("");
            pass1Info.removeClass("error");
            validatePass2();
            return true;
        }
    }
    function validatePass2(){
        var a = $("#password1");
        var b = $("#password2");
        //are NOT valid
        if( pass1.val() != pass2.val() ){
            pass2.addClass("error");
            pass2Info.text("Passwords doesn't match!");
            pass2Info.addClass("error");
            return false;
        }
        //are valid
        else{
            pass2.removeClass("error");
            pass2Info.text("");
            pass2Info.removeClass("error");
            return true;
        }
    }
    function validateMessage(){
        //it's NOT valid
        if(message.val().length &lt; 10){
            message.addClass("error");
            return false;
        }
        //it's valid
        else{           
            message.removeClass("error");
            return true;
        }
    }
});
</code></pre>

<p>When I click the submit button the form passes via php and stops the jquery. If the submit button is not pressed than it carries on validating via jQuery.</p>

<p>How can I get it to if all details are correct to pass the PHP validation too.  If errors or user has jQuery disabled to validate via PHP?</p>

<p>Thank you</p>
