Как добавить действительный класс в зависимый элемент в случае успеха зависимого в плагине jQuery Validate?

0

У меня есть два текстовых #inputPh номер телефона, #inputPh и адрес электронной почты, #inputEm. Любой из них является обязательным. Я использую следующие правила:

         rules: {

                inputPhone: {                           
                        required: {depends: function(){
                        if($("#inputEm").val()=="")//return value based on textbox1 status
                        return true;
                        else
                        return false;
                            }
                        },
                        isNum: true,
                        minlength: 10,
                        maxlength: 12
                    },        
               inputEmail: {
                        required: {depends: function(){
                        if($("#inputPh").val()=="")//return value based on textbox1 status
                        return true;
                        else
                        return false;
                            }
                        },
                        email: true
                    }
         },
         highlight: function(element) {
                    $(element).closest('.control-group').removeClass('success').addClass('error');

        },
        success: function(element) {
                    element.addClass('valid').closest('.control-group').removeClass('error').addClass('success');

        }

Проверка корректна, но проблема заключается в том, что когда форма отправляется с пустыми полями, оба текстовых поля будут высоколегированы с классом ошибок. Впоследствии, когда я ввожу допустимое значение в одно из текстовых полей, только этот особый поле получает класс успеха, а другой будет иметь класс ошибки, даже если форма может быть отправлена.

Как я могу получить доступ или передать зависимый элемент через функции JQuery Validator?

  • 0
    Если проверка работает нормально, то в чем реальная проблема? Почему в этом случае проблема с сохранением класса ошибки в отправленном поле?
  • 0
    "Как я могу получить доступ или передать зависимый элемент через функции проверки jquery?" ~ Что это вообще значит? Опишите, какое поведение вы хотите достичь.
Показать ещё 2 комментария
Теги:
jquery-validate

1 ответ

1
Лучший ответ

Вместо этого используйте метод require_from_group включенный в файл additional-methods.js. В соответствии с комментариями кода:

/*
 * Lets you say "at least X inputs that match selector Y must be filled."
 *
 * The end result is that neither of these inputs:
 *
 *  <input class="productinfo" name="partnumber">
 *  <input class="productinfo" name="description">
 *
 *  ...will validate unless at least one of them is filled.
 *
 * partnumber:  {require_from_group: [1,".productinfo"]},
 * description: {require_from_group: [1,".productinfo"]}
 *
 */

Не будет никаких проблем с классом ошибок, оставшимся в другом поле...

$(document).ready(function() {

    $('#myform').validate({
        rules: {
            inputPhone: {
                require_from_group: [1, '.mygroup'],
                // isNum: true, // <-- no such rule in this plugin
                minlength: 10,
                maxlength: 12
            },
            inputEmail: {
                require_from_group: [1, '.mygroup'],
                email: true
            }
        }
    });

});

ДЕМО: http://jsfiddle.net/wWjWM/

При желании вы можете использовать параметр groups чтобы объединить сообщения для обоих полей в одну метку. Однако это может быть нежелательно, поскольку оно также будет применяться ко всем другим правилам в обоих полях.

BTW: В файле additional-methods.js существуют различные правила телефонных номеров, которые можно использовать вместо minlength и maxlength. (в этом плагине нет такого правила, как isNum. Он называется digits.)

  • 0
    я спешил найти какое-то решение, поэтому я забыл добавить разметку html и упомянуть, что isNum - это пользовательский метод, который я добавил в математическое выражение для номера телефона. спасибо за ответ и ваши усилия ... это работает! :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню