2

我使用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;
    }
    });

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

4

1 回答 1

1

引用：“但我需要在每个字段旁边显示错误，而不是在页面顶部显示所有错误的摘要。......有没有改变显示样式的方法？”

没有。 根据文档，没有列出如何放置错误消息的选项。

由于插件的描述说“以 CodeIgniter 表单验证 API 为模型”，这告诉我重点是在表单上方的单个摘要框中显示错误消息，就像 CodeIgniter 验证一样。如果您想在每个字段旁边显示单独的错误消息，您只是选择了错误的插件。

引用：“......还有更好的脚本可以做到这一点吗？”

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

“该插件由 Jörn Zaefferer 编写和维护，他是 jQuery 团队的成员、jQuery UI 团队的首席开发人员和 QUnit 的维护者。它始于 2006 年 jQuery 的早期，并从那时起进行了更新和改进。 "

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>
于 2013-02-03T16:45:38.620 回答