Question

我正在使用 Twitter Bootstrap 来创建HTML表单，并使用JQuery验证插件来验证它。我的代码如下： HTML部分

<form id="profile_form">
    <div class="control-group">
                <label class="control-label" for="firstname">firstname&nbsp;<span>*</span></label>

                <div class="controls">
                    <input type="text" id="firstname" name="firstname" class="input-medium"
                           value="<?php echo $firstname ?>">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="lastname">lastname&nbsp;<span>*</span></label>

                <div class="controls">
                    <input type="text" id="lastname" name="lastname" class="input-medium"
                           value="<?php echo $lastname ?>">
                </div>
            </div>
</form>

此html使用外部javascript文件，验证码驻留在该文件中。用于验证的脚本文件部分如下：

$(document).ready(function () {
    $('#profile_form').validate({
        rules: {
            firstname: {
                required: true
            },
            lastname: {
                required: true
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.closest('.control-group').addClass('valid').removeClass('error').addClass('success');
        }
    }); 
});

注意：我没有与此表单关联的提交按钮，而是在引导程序中使用超链接（<a>）和类button 创建类似按钮的项目。（我认为这不会有任何区别）。

现在当我尝试在上面两个字段中输入内容时，当输入为空时，它不会立即突出显示带红色边框的相应输入字段，有人可以告诉我该怎么做吗？在这里，我澄清了我想要的东西：

无论用户第一次输入什么，输入字段都不会被红色/绿色边框包围以显示成功或错误。当用户单击超链接<a id="finalize_btn"></a>时，html页面将跳转到第一个无效输入字段，并突出显示所有无效输入字段（可能带有错误消息）。一旦用户正确输入内容，错误消息将消失，绿色边框似乎显示成功。

希望您能理解我的解释，并感谢所有潜在的帮助！

Answer 1

它无法正常工作，因为success 不是 highlight的补充回调函数。

As per documentation：

取消高亮 - 调用以还原选项highlight所做的更改，与highlight相同的参数。

而success失败了，因为它无法接受element参数。再次，根据文档：

成功 - 如果给出了一个函数，则使用 label作为其唯一参数调用。

因此，对于您的代码，您编写element作为success的参数，但插件会查看此内容并将其解释为label的名称。

请改用：

$(document).ready(function () {
    $('#profile_form').validate({
        rules: {
            firstname: {
                required: true
            },
            lastname: {
                required: true
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        unhighlight: function (element) {
            $(element).closest('.control-group').addClass('valid success').removeClass('error');
        }
    }); 
});

请注意，没有理由将多个.addClass()实例链接在一起。只需在一个.addClass()内放置多个类名。

使用添加到课程中的颜色来处理DEMO以强调：http://jsfiddle.net/5tykD/

jquery验证插件不能始终如一地工作

1 个答案: