使用Jquery进行HTML5验证

Question

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>

Answer 1

You could use a framework like modernizr to detect if the document supports the invalid event. While initializing your app, check to see if invalid is a supported event. If so, bind to invalid , if not bind to submit . It's a pretty robust framework (customizable and relatively small) for detecting support of various features.

This question might be of some help as well: How to bind to the submit event when HTML5 validation is used?

Answer 2

What you are looking for is a polyfill for HTML5 validation.

This will basically, use javascript validation in cases where the clients browser is lacking. Polyfills are implemented in cases where a browser doesn't support the feature, which leads toward a natural, and optimized web browsing experience for the user.

This is a good resource for HTML5 form polyfills:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-forms

On polyfills:
http://en.wikipedia.org/wiki/Polyfill