jquery - 在 JavaScript 字段旁边显示验证错误

Question

我使用Validate.Js使用 jQuery 验证我的 HTML 表单，效果非常好。但我需要在每个字段旁边显示错误，而是在页面顶部显示所有错误的摘要。

HTML:

<div class="success_box">All of the fields were successfully validated!</div>
<div class="error_box"></div>

    <form name="example_form">
    <label for="req">Required field:</label>
    <label for="alphanumeric">Alphanumeric field:</label>
    <div id="AlphaNumeric"></div>

    <input name="req" id="req" />
    <input name="alphanumeric" id="alphanumeric" />

    <label for="password">Password:</label>
    <label for="password_confirm">Password Confirmation (match password):</label>

    <input name="password" id="password" type="password" />
    <input name="password_confirm" id="password_confirm" type="password" />

    <label for="email">Email:</label>
    <label for="minlength">Min length field (min. 8 chars):</label>

    <input name="email" id="email" />
    <input name="minlength" id="minlength" />

    <label for="tos_checkbox">Required checkbox (example: Terms of Service)</label>
    <input name="tos_checkbox" id="tos_checkbox" type="checkbox" />

    <button class="button gray" type="submit" name="submit">Submit</button>
</form> 

JavaScript:

    new FormValidator('example_form', [{
    name: 'req',
    display: 'required',    
    rules: 'required'
    }, {
    name: 'alphanumeric',
    rules: 'alpha_numeric'
    }, {
    name: 'password',
    rules: 'required'
    }, {
    name: 'password_confirm',
    display: 'password confirmation',
    rules: 'required|matches[password]'
    }, {
    name: 'email',
    rules: 'valid_email'
    }, {
    name: 'minlength',
    display: 'min length',
    rules: 'min_length[8]'
    }, {
    name: 'tos_checkbox',
    display: 'terms of service',
    rules: 'required'
    }], function(errors, event) {
    var SELECTOR_ERRORS = $('.error_box'),
        SELECTOR_SUCCESS = $('.success_box');

    if (errors.length > 0) {
        SELECTOR_ERRORS.empty();

        for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
            SELECTOR_ERRORS.append(errors[i].message + '<br />');
        }

        SELECTOR_SUCCESS.css({ display: 'none' });
        SELECTOR_ERRORS.fadeIn(200);
    } else {
        SELECTOR_ERRORS.css({ display: 'none' });
        SELECTOR_SUCCESS.fadeIn(200);
    }

    if (event && event.preventDefault) {
        event.preventDefault();
    } else if (event) {
        event.returnValue = false;
    }
    });

有没有办法改变显示风格？有没有更好的脚本可以做到这一点？

Answer 1

Quote: "But I need to show the errors beside each field, instead it shows a summary of all errors at the top of the page. ... ... Is there a method to change the display style?"

不。 As per documentation ，没有列出如何放置错误消息的选项。

由于插件的描述是“根据 CodeIgniter 表单验证 API 建模”，这告诉我重点是在表单上方的单个摘要框中显示错误消息，就像 CodeIgniter 验证一样做。如果您希望每个字段旁边都有单独的错误消息，那么您只是选择了错误的插件。

Quote: "... And are there any better scripts that can do this?"

是。 jQuery Validate 插件是由 jQuery 团队的人员开发的。有巨大的支持基础和大量的选择。

"The plugin is written and maintained by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit. It was started back in the early days of jQuery in 2006, and updated and improved since then."

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://docs.jquery.com/Plugins/Validation/

默认情况下，错误显示在每个字段的“旁边”。

查看演示: http://jsfiddle.net/UGyXP/

jQuery:

$(document).ready(function() {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                minlength: 5
            },
            field2: {
                required: true,
                email: true
            }
        }
    });

});

HTML:

<form id="myform">  
     <input type="text" name="field1" />
     <input type="text" name="field2" />
     <input type="submit" />
</form>