-1

我正在使用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页面会跳转到第一个无效输入字段，并突出显示所有无效输入字段（可能带有错误信息）。一旦用户正确输入内容，错误信息就会消失，并出现绿色边框表示成功。

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

4

1 回答 1

0

它不能正常工作，因为success它不是highlight.

根据文档：

unhighlight - 调用以恢复选项所做的更改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().

将颜色添加到类以进行强调的工作演示：http: //jsfiddle.net/5tykD/

于 2013-05-11T14:07:37.463 回答