0

我想让它与不支持 HTML5 验证的浏览器兼容。基本上，我要做的就是默认情况下使用 HTML5 从浏览器给出基本错误，并为每个有错误的字段的每个输入、标签和父 div 添加一个错误类，我将有一些额外的 CSS 效果例如红色文字/边框。发生的事情是我从浏览器收到默认错误消息，但没有将错误类添加到我的输入、标签或 div 中。如果我从其中一个字段中删除所需的 HTML5 并填写表单的其余部分，它将运行我的函数并添加错误类。下面你会看到我的表单和我的 jQuery 函数来添加错误类。

我认为正在发生的是，当 HTML5 发现错误时，它没有运行我的提交函数，该函数会添加错误类。我想我可以为每个输入触发无效的绑定函数并添加错误类，但是如果浏览器不支持 HTML5 验证，我认为我不会有任何验证。

jQuery部分：

$('#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 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>
4

2 回答 2

1

您可以使用诸如modernizr之类的框架来检测文档是否支持该invalid事件。在初始化您的应用程序时，检查是否invalid是受支持的事件。如果是，则绑定到invalid，如果不绑定到submit。这是一个非常强大的框架（可定制且相对较小），用于检测对各种功能的支持。

这个问题也可能有一些帮助： How to bind to the submit event when HTML5 validation is used?

于 2013-08-07T20:34:55.957 回答
0

您正在寻找的是用于 HTML5 验证的 polyfill。

这基本上将在缺少客户端浏览器的情况下使用 javascript 验证。在浏览器不支持该功能的情况下实施 Polyfill，从而为用户带来自然且优化的 Web 浏览体验。

这是 HTML5 表单填充的好资源：
https ://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-forms

关于 polyfill：
http ://en.wikipedia.org/wiki/Polyfill

于 2013-08-07T20:32:43.503 回答