I can't get my form to validate AND submit using jQuery validation

Question

I have been digging around on here and other sites for a while and am stuck. I'm trying to use jQuery to validate my form (concurrently as the user fills out the form) and, if the form is valid have it submit to a php page I have created to process the contents of the form. I have been able to have it validate but I can't have it also submit it...if I put a value in for the form action parm then it bypasses the validation. Please help...

I apologize, in advance, for the bad coding. Here is my jquery-validate.js:

//global vars
var form = $("#customForm");
var name = $("#name");
var nameInfo = $("#nameInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var pass1 = $("#pass1");
var pass1Info = $("#pass1Info");
var pass2 = $("#pass2");
var pass2Info = $("#pass2Info");
var message = $("#message");

function validateName(){
//if it's NOT valid
if(name.val().length < 4){
    name.addClass("error");
    nameInfo.text("We want names with more than 3 letters!");
    nameInfo.addClass("error");
    return false;
}
//if it's valid
else{
    name.removeClass("error");
    nameInfo.text("What's your name?");
    nameInfo.removeClass("error");
    return true;
}
}
function validatePass1(){
var a = $("#password1");
var b = $("#password2");

//it's NOT valid
if(pass1.val().length <5){
    pass1.addClass("error");
    pass1Info.text("Ey! Remember: At least 5 characters: letters, numbers and '_'");
    pass1Info.addClass("error");
    return false;
}
//it's valid
else{
    pass1.removeClass("error");
    pass1Info.text("At least 5 characters: letters, numbers and '_'");
    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("Confirm password");
    pass2Info.removeClass("error");
    return true;
}
}
function validateMessage(){
//it's NOT valid
if(message.val().length < 10){
    message.addClass("error");
    return false;
}
//it's valid
else{
    message.removeClass("error");
    return true;
}
}
/*
Validate the name field in: blur and keyup events.
Validate the email field in: blur event.
Validate the password fields in: blur and keyup events.
Validate the message field in: blur, and keyup event.
Validate all fields in: submit form event
*/

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

My form code is pasted here:

<form method="post" id="customForm" action="rcv-form1.php">
        <div>
            <label for="name">Name</label>
            <input id="name" name="name" type="text" />
            <span id="nameInfo">What's your name?</span>
        </div>
        <div>
            <label for="email">E-mail</label>
            <input id="email" name="email" type="text" />
            <span id="emailInfo">Valid E-mail please, you will need it to log in!</span>
        </div>
        <div>
            <label for="pass1">Password</label>
            <input id="pass1" name="pass1" type="password" />
            <span id="pass1Info">At least 5 characters: letters, numbers and '_'</span>
        </div>
        <div>
            <label for="pass2">Confirm Password</label>
            <input id="pass2" name="pass2" type="password" />
            <span id="pass2Info">Confirm password</span>
        </div>
        <div>
            <label for="message">Message</label>
            <textarea id="message" name="message" cols="" rows=""></textarea>
        </div>
        <div>
            <input id="send" name="send" type="submit" value="Send" />
        </div>
    </form>

And here is my php that receives the form (this is just for testing now. i will email or insert into mySQL once i know i can properly validate stuff):

<html><head>
<title>Display form values</title>
</head>
<body>
<?
//$valid_form = TRUE;
//$bad_field_count = 0;

$table1_beg = '<center><table align="center" bordercolor="#F00" width="600px" border="3" cellspacing="1" cellpadding="1"><caption>Form status</caption><tr><th scope="col">Field Name</th><th scope="col">Field Value</th></tr>';

$row_beg = '<tr><td>';
$td = '</td><td>';
$row_end = '</td></tr>';

$table1_end = '</table></center>';

function checkEmail($field)
{
if (filter_var($field, FILTER_VALIDATE_EMAIL)) {
    //echo "This ($field) email address is considered valid.";
    return $field;
  } else {
      $field = filter_var($field, FILTER_SANITIZE_EMAIL);
      //global $bad_field_count; $bad_field_count++;
      return $field;
  }
}
function SanitizeString($field)
{
    $field = filter_var($field, FILTER_SANITIZE_STRING);
    //if(is_null($field) || $field == '') { global $bad_field_count; $bad_field_count++;}
    return $field;
}


// ensure form data is valid
$name=SanitizeString($_POST['name']);

//$email=$_POST['email'];
$email = checkEmail($_POST['email']);

$pass1=SanitizeString($_POST['pass1']);

$pass2=SanitizeString($_POST['pass2']);

$message=SanitizeString($_POST['message']);

    echo $table1_beg;
    echo $row_beg . "Name" . $td . "<u>" . $name . "</u>" . $row_end;
    echo $row_beg . "Email" . $td . "<u>" . $email . "</u>" . $row_end;
    echo $row_beg . "Password 1" . $td . "<u>" . $pass1 . "</u>" . $row_end;
    echo $row_beg . "Password 2" . $td . "<u>" . $pass2 . "</u>" . $row_end;
    echo $row_beg . "Message" . $td . "<u>" . nl2br($message) . "</u>" . $row_end;
        //echo $row_beg . "Number of bad fields" . $td . "<b>" . $bad_field_count . "</b>" . $row_end;
    echo $table1_end;
    //}

?>
</body></html>

Problem 1: When I have form action="" I can validate the form only after hitting submit...it doesn't say it's invalid until after submitting when I thought it should do it concurrently as it is typed in. Problem 2: If I have my form action set to anything but "" it will ignore the jQuery validation all together.

I'm new to the form validation stuff. Can someone point me in the right direction? Thanks, in advance!

Answer 1

I've gave you an easy way to validate your all inputs/textarea within one function but you have to complete it, I've just gave you the structure and only name validation has done as an example for you and I hope you can understand it easily. If you need more help/difficulties just leave a message. This should be placed inside ready event.

var info={
    'nameInfo':$("#nameInfo"),
    'emailInfo':$("#emailInfo"),
    'pass1Info':$("#pass1Info"),
    'pass2Info':$("#pass2Info")
}
$('#customForm input,textarea').not("#send").bind('blur keyup', function(e)
{
    e.stopPropagation();
    var el=$(e.target);
    var id=el.attr('id');

    if(el.attr('id')=='message' && e.type=="keyup") 
    {
        return false;
    }   
    else 
    {
        if(id=="name")
        {   if(el.val().length < 4)
            {
                el.addClass("error");
                info.nameInfo.text("We want names with more than 3 letters!");
                info.nameInfo.addClass("error");
                return false;
            }
            else
            {
                el.removeClass("error");
                info.nameInfo.text("What's your name ?");
                info.nameInfo.removeClass("error");
                return true;
            }
        }

        if(id=="email")
        {
            // Your email validation code   
        }   
        if(id=="pass1")
        {
             // Your pass1 validation code  
        }
        if(id=="pass2")
        {
             // Your pass2 validation code  
        }
        if(id=="message")   
        {   
             // Your message validation code    
        }
    }   
});

Answer 2

You have a few problems, your form submit code doesn't have curly brackets around it, and you don't have a function for validate email, try this:

//global vars
var form = $("#customForm");
var fname = $("#name");
var nameInfo = $("#nameInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var pass1 = $("#pass1");
var pass1Info = $("#pass1Info");
var pass2 = $("#pass2");
var pass2Info = $("#pass2Info");
var message = $("#message");

function validateName() {
    //if it's NOT valid
    if (fname.val().length < 4) {
        fname.addClass("error");
        nameInfo.text("We want names with more than 3 letters!");
        nameInfo.addClass("error");
        return false;
    }
    //if it's valid
    else {
        fname.removeClass("error");
        nameInfo.text("What's your name?");
        nameInfo.removeClass("error");
        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("Confirm password");
        pass2Info.removeClass("error");
        return true;
    }
}

function validatePass1() {
    var a = $("#password1");
    var b = $("#password2");

    //it's NOT valid
    if (pass1.val().length < 5) {
        pass1.addClass("error");
        pass1Info.text("Ey! Remember: At least 5 characters: letters, numbers and '_'");
        pass1Info.addClass("error");
        return false;
    }
    //it's valid
    else {
        pass1.removeClass("error");
        pass1Info.text("At least 5 characters: letters, numbers and '_'");
        pass1Info.removeClass("error");
        validatePass2();
        return true;
    }
}

function validateMessage() {
    //it's NOT valid
    if (message.val().length < 10) {
        message.addClass("error");
        return false;
    }
    //it's valid
    else {
        message.removeClass("error");
        return true;
    }
}

function validateEmail(){
    //add validation for email here
    return true;
}
/*
Validate the name field in: blur and keyup events.
Validate the email field in: blur event.
Validate the password fields in: blur and keyup events.
Validate the message field in: blur, and keyup event.
Validate all fields in: submit form event
*/

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