jQuery validate的“.errorClass”工作但“hasClass()”无法找到该类

时间:2014-01-06 13:56:10

标签: javascript jquery jquery-validate

问题

我不是程序员,我正在尝试编程。

我尝试使用jQuery-validate插件来控制表单输入,它完美运行,Bootstrap甚至可以找到“.text-danger”类并更改其颜色。

但是,“。hasClass()”方法就是不行。

我在for循环中放了一些“console.log()”函数,用于查找此类。 我每次收到的日志消息都是“已更改”,“hasSmall”,“noClass”。

我是否在JS代码中犯了错误?

请帮帮我。

代码

这是我的HTML表单:

<div class="form-group">
    <label for="username">Username </label>
    <input type="text" class="form-control" name="username" id="signUpUserName" />
</div>
<div class="form-group">
    <label for="password">Password </label>
    <input type="password" class="form-control" name="password" id="signUpPassword" />
</div>
<div class="form-group">
    <label for="email">Email </label>
    <input type="text" class="form-control" name="email" id="signUpEmail" />
</div>

这是JavaScript:

errorPlacement: function(error, element) {
    var obj = $('[name="'+element.attr('name')+'"]');
    obj.siblings('label').append(error);
},

我在valadate.min.js中更改了一些值:

$.extend($.validator, {

defaults: {
    messages: {},
    groups: {},
    rules: {},

    errorClass: "text-danger", // I've changed this
    validClass: "text-success", // this
    errorElement: "small", // and this

    focusInvalid: true,
    errorContainer: $([]),
    errorLabelContainer: $([]),
    onsubmit: true,
    ignore: ":hidden",
    ignoreTitle: false,

另外,JS:

function changeInputAreaStatus(id) {
    $(id).change(function(id) {
        console.log('changed');
        var errorMessageContainer = $(id).siblings('label');
        if(errorMessageContainer.has('small')){
            console.log('hasSmall');
            if (errorMessageContainer.children('small').hasClass('text-danger')) {
                console.log('hasDangerClass');
                errorMessageContainer.parent().removeClass('has-error').addClass('has-error');
            } else if (errorMessageContainer.children('small').hasClass('text-success')) {
                console.log('hasSucessClass');
                errorMessageContainer.parent().removeClass('has-error');
            } else {
                console.log('noClass');
            }
        }
    });
}
    changeInputAreaStatus('#signUpUserName');
    changeInputAreaStatus('#signUpPassword');
    changeInputAreaStatus('#signUpEmail');

1 个答案:

答案 0 :(得分:0)

你应该尝试这样的事情:

var textSuccess = errorMessageContainer.find('.text-success');
if(textSuccess != null && textSuccess.length > 0){
    console.log('hasSucessClass');
}

它应该可以帮助您验证errorMessageContainer是否具有文本成功类。

祝你好运