Question

我使用Validate.Js来验证我的HTML表单，使用jQuery＆amp;它完美地运作。但我需要在每个字段旁边显示错误，而不是在页面顶部显示所有错误的摘要。

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

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

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

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

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

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

“该插件由JörnZaefferer编写和维护 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>

字段Javascript旁边显示验证错误

1 个答案: