php form action and jquery validation executing at once - php

Question

My jquery validation and php form are both executing at once, means the validations errors are showing and also the php action is executed. here is the complete code. The jquery form submit function is returning false if the there are errors in form but even thought the form getting executed..
<form class="form-3 form-horizontal ajxfrm " id="step-three" enctype="multipart/form-data" action="<?php echo $html->addLink(array('controller'=>'homes','action'=>'step_three')); ?>" method="post" target="_parent">
<div id="calendar">
<div class="clear"></div>
<div class="control-group">
<div class="control-label">Name<span>*</span></div>
<div class="controls"><input type="text" name="name" id="name" />
<span id="nameInfo"></span></div>
</div>
<div class="control-group">
<div class="control-label">Email<span>*</span></div>
<div class="controls"><input type="text" name="email" id="email" />
<span id="emailInfo"></span></div>
</div>
<div class="control-group">
<div class="control-label">Contact<span>*</span></div>
<div class="controls"><input type="text" name="contact" id="contact" />
<span id="contactInfo"></span></div>
</div>
<div class="control-group">
<div class="control-label">Skype Id<span>*</span></div>
<div class="controls"><input type="text" name="skypeid" id="skype" />
<span id="skypeInfo"></span></div>
</div>
<div style="position:relative">
<div class="control-group">
<div class="control-label">Files<br/><span style="font-size:10px; font-style:italic">(Optional)</span></div>
<div class="controls">
<input id="fileupload" type="file" name="fileupload[]" multiple/>
<span id="fileInfo"></span><br/>
</div>
</div>
</div>
<div class="control-group">
<div class="control-label">Your Message<span>*</span></div>
<div class="controls"><textarea rows="3" name="message" id="message"></textarea>
<span id="messageInfo"></span></div>
</div>
<div class="clear"></div>
</div>
<div id="submit" style=" text-align:right;">
<input type="hidden" name="post" value="1"/>
<input type="submit" class="btn green" value="Next" id="step3submit" style="margin-right:-20%; margin-top:5%"/>
</div>
</form>
Here is the jquery file
$(document).ready(function () {
//global vars
var form = $("#step-three");
var name = $("#name");
var nameInfo = $("#nameInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var contact = $("#contact");
var contactInfo = $("#contactInfo");
var skype = $("#skype");
var skypeInfo = $("#skypeInfo");
var message = $("#message");
//On blur
name.blur(validateName);
email.blur(validateEmail);
contact.blur(validateContact);
skype.blur(validateSkype);
message.blur(validateMessage);
//On key press
name.keyup(validateName);
email.keyup(validateEmail);
contact.keyup(validateContact);
skype.keyup(validateSkype);
message.keyup(validateMessage);
//On Submitting
form.submit(function () {
if (validateName() & validateEmail() & validateContact() & validateSkype() & validateMessage())
return true;
else
return false;
});
//validation functions
function validateEmail() {
//testing regular expression
var a = $("#email").val();
var filter = /^\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
//if it's valid email
if (email.val().length == 0) {
email.addClass("error");
emailInfo.text("Required");
emailInfo.addClass("error");
return false;
} else if (filter.test(a)) {
email.removeClass("error");
emailInfo.text("");
emailInfo.removeClass("error");
return true;
}
//if it's NOT valid
else if (!filter.test(a)) {
email.addClass("error");
emailInfo.text("Valid Email Please");
emailInfo.addClass("error");
return false;
}
}
function validateName() {
//if it's NOT valid
if (name.val().length == 0) {
name.addClass("error");
nameInfo.text("Required");
nameInfo.addClass("error");
return false;
}
//if it's valid
else {
name.removeClass("error");
nameInfo.text("");
nameInfo.removeClass("error");
return true;
}
}
function validateContact() {
//if it's NOT valid
if (contact.val().length == 0) {
contact.addClass("error");
contactInfo.text("Required");
contactInfo.addClass("error");
return false;
}
//if it's valid
else {
contact.removeClass("error");
contactInfo.text("");
contactInfo.removeClass("error");
return true;
}
}
function validateSkype() {
//if it's NOT valid
if (skype.val().length == 0) {
skype.addClass("error");
skypeInfo.text("Required");
skypeInfo.addClass("error");
return false;
}
//if it's valid
else {
skype.removeClass("error");
skypeInfo.text("");
skypeInfo.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");
messageInfo.text("More than 10 Characters required");
messageInfo.addClass("error");
return false;
}
if (message.val().length == 0) {
message.addClass("error");
messageInfo.text("Required");
messageInfo.addClass("error");
return false;
}
//it's valid
else {
message.removeClass("error");
messageInfo.text("");
messageInfo.removeClass("error");
return true;
}
}
});

Answer 1

You have to use preventDefault() function. The submit function can't be 'canceled' with returning false. it is an event and there are many handlers 'listening' to it. You have to stop the event from propagating, thus preventing the handlers to handle the event ;)
The code:
$("form").submit(function(e){
if(!(validateName() && validateEmail() && validateContact() && validateSkype() && validateMessage())){
e.preventDefault();
// and maybe some alert() with fail info
}
else{
//whatever you need if validation suceeds
}
});

Answer 2

use && place of &
I hope it will help