HTML5 Validation with Jquery

HTML5 Validation with Jquery

I want to make this compatible for browsers which do not support HTML5
validation. Basically, all I am trying to do is give the basic error by
default from the browser with HTML5 and also add a class of error to each
input, label and parent div for each field that has an error which I will
have some additional CSS effects such as red text/border. What is
happening is I get the default error message from the browser but no error
classes are added to my input, label or div. If I remove HTML5 required
from one of the fields and fill out the rest of the form it will then run
my function and add the error classes. Below you will see my form and my
jQuery function to add the error classes.
What I think is happening is when HTML5 finds an error it is not running
my submit function which would add the error classes. I have figured I
could trigger the invalid bind function for each input and add the error
classes but I then don't think I would have any validation if the browser
didn't support HTML5 validation.
jQuery portion:
$('#contact_us_form').submit(function() {
var error_count = 0;
$('#contact_us_form div').each(function() {
$(this).removeClass('error');
});
$('#contact_us_form input').each(function() {
$(this).removeClass('error');
});
$('#contact_us_form label').each(function() {
$(this).removeClass('error');
});
if ($('#fname').val() == '') {
error_count++;
$('#fname').parent('div').addClass("error");
$('#fname').addClass("error");
$('label[for="fname"]').addClass("error");
}
if ($('#lname').val() == '') {
error_count++;
$('#lname').parent('div').addClass("error");
$('#lname').addClass("error");
$('label[for="lname"]').addClass("error");
}
if ($('#email').val() == '') {
error_count++;
$('#email').parent('div').addClass("error");
$('#email').addClass("error");
$('label[for="email"]').addClass("error");
} else if (!isValidEmailAddress( $('#email').val() ) ){
error_count++;
$('#email').parent('div').addClass("error");
$('#email').addClass("error");
$('label[for="email"]').addClass("error");
}
if ($('#phone').val() == '') {
error_count++;
$('#phone').parent('div').addClass("error");
$('#phone').addClass("error");
$('label[for="phone"]').addClass("error");
} else if (!isPhone($('#phone').val())) {
error_count++;
$('#phone').parent('div').addClass("error");
$('#phone').addClass("error");
$('label[for="phone"]').addClass("error");
}
if ($('#message').val() == '') {
error_count++;
$('#message').parent('div').addClass("error");
$('#message').addClass("error");
$('label[for="message"]').addClass("error");
}
if (error_count == 0) {
submitFormWithAjax();
}
return false;
});
HTML form:
<form class="form form_careers" action="#" id="contact_us_form">
<fieldset>
<legend>Contact Information</legend>
<div class="field-name-first">
<label for="fname" class="inlined">First Name</label>
<input accesskey="f" class="input-text" id="fname"
name="fname" required tabindex="1" type="text" value="" />
</div>
<div class="field-name-last">
<label for="lname" class="inlined">Last Name</label>
<input accesskey="l" class="input-text" id="lname" required
tabindex="2" type="text" />
</div>
<div class="field-email-primary">
<label for="email" class="inlined">Email</label>
<input accesskey="e" class="input-text" id="email" required
tabindex="3" type="email" />
</div>
<div class="field-phone-primary">
<label for="phone" class="inlined">Phone</label>
<input accesskey="p" class="input-text" id="phone" required
tabindex="4" type="tel" />
</div>
<div class="field-message-comments">
<label for="message" class="inlined">Message/Comments</label>
<textarea accesskey="m" class="" id="message" required
tabindex="5"></textarea>
</div>
<!--input class="cta_button cta_primary" tabindex="7"
type="submit" value="Contact Us" /-->
<button class="cta_button cta_primary" tabindex="6">Contact
Us</button>
</fieldset>
</form>