jquery.проверка размещения ошибки

#jquery

#jquery

Вопрос:

Мои знания CSS немного ограничены.

Хотелось бы выделить метку в левом div при возникновении ошибки в правом div

 messages: { 
    userID: ""

}, 
errorElement: "span",     
    errorPlacement: function(error, element) {         
    element.siblings("label").append(error);     
    },     
    highlight: function(element) {         
    $(element).parent().children("div.left label").addClass("error");    
    },     
    unhighlight: function(element) {         
    $(element).parent().children("div.left label").addClass("error");     
    } 


 <div class="left">
 <label for="userID">Username:</label> <br />
 </div>
<div class="right">    
<input  type="text" name="userID" id="userID" onkeyup="nospaces(this)" maxlength="15" onBlur="checkUID(this)" onKeyPress="hideWarning()">
</div>
 

В настоящее время «ничего» не происходит, ни ошибки, ни выделения. Я не уверен, как изменить сценарий errorPlacement для соответствия. Спасибо, очень хорошо.

Ответ №1:

Если вы хотите, чтобы все метки были выделены классом ошибки, используйте функцию setDefaults():

 if ( jQuery.validator ) {
    jQuery.validator.setDefaults({
        /* Place error labels below invalid fields */
        errorPlacement: function(error, element){
            $('label[for='   element.attr('id')   ']').addClass("error");
        }
    });
}

$('#commentForm').validate();
 

http://jsfiddle.net/iknowkungfoo/dvyqN/1/

Комментарии:

1. О, я, очевидно, не привык к этому форуму…. Я не видел вашего комментария, это сработает. Спасибо!

Ответ №2:

Изменить

 $(element).siblings("label").addClass("error");
 

Для

 $(element).parent().children("div.left label[for='password']").addClass("error");
 

Это позволит выбрать метку, когда она находится в левом div. Сделайте то же самое для .removeClass() . Наконец, вы также можете быть менее конкретными с селектором и просто использовать div.left label вместо div.left label[for='password'] , если хотите, чтобы правило применялось ко всем полям.

Комментарии:

1. Идеальный. Большое вам спасибо.

2. Нет проблем. Кроме того, не забудьте закрыть свой <label> тег. Я заметил, когда редактировал ваш вопрос, что он не был закрыт перед <br> тегом. И если мой ответ устраняет проблему, отметьте его ответом. 🙂

3. jtfairbank, не могли бы вы еще раз взглянуть на это? Извините, я думал, что добавил левый div, однако я смотрел на более раннюю версию. Я отредактирую приведенный выше код