Группа ввода недопустимых значений

Question

У меня есть форма ввода, с которой я выполняю проверку на стороне клиента с помощью плагина проверки достоверности jQuery. Основное использование работает отлично, за исключением конкретного сценария:

Форма разбивает поля ввода адреса, позволяя отдельные поля для номера улицы, имени, города, штата и почтового индекса. Сам адрес является необязательным вводом формы (пользователь может выбрать не вводить адрес), но я хочу убедиться, что если какое-либо из этих полей будет использовано, пользователю будет предложено ввести все поля.

Это работает, за исключением случая, когда кто-то входит в адрес и отправляет запросы, а затем решает указать адрес. Идеальное поведение в этом случае будет заключаться в том, что, как только текст во входных данных, которые они ввели, удаляется, чтобы группа адресов была не указана.

Вот текущий сценарий:

1. Пользователь вводит информацию в только в одном поле ввода, например, название улицы.
2. Кнопка отправки нажата.
3. Плагин проверки достоверности выделяет другие адресные входы с сообщением об ошибке, указывающим полный адрес.
4. Пользователь решает не вводить адрес и удаляет предыдущий ввод, например. стирает название улицы
5. В идеале: Все другие выделенные адресные входы не подсвечиваются, и сообщение об ошибке удаляется. На самом деле: Выделенные адреса и сообщения остаются до отправки формы.

Это javascript который демонстрирует проблему и соответствующий JSFiddle.

$("form").validate({ 
    errorClass: 'error', 
    errorElement: 'label', 
    submitHandler: function() { 
     alert("Form submitted"); 
     return false; 
    }, 
    groups: { 
     address: "streetNumber streetName city state zipcode" 
    }, 
    rules: { 
     streetNumber: { 
      required: { 
       depends: function(){ 
        return $("#streetName").val() != '' || $("#city").val() != '' || $("#state").val() != '' || $("#zipcode").val() != ''; 
       } 
      } 
     }, 
     streetName: { 
      required: { 
       depends: function(){ 
        return $("#streetNumber").val() != '' || $("#city").val() != '' || $("#state").val() != '' || $("#zipcode").val() != ''; 
       } 
      } 
     }, 
     city: { 
      required: { 
       depends: function(){ 
        return $("#streetNumber").val() != '' || $("#streetName").val() != '' || $("#state").val() != '' || $("#zipcode").val() != ''; 
       } 
      } 
     }, 
     state: { 
      required: { 
       depends: function(){ 
        return $("#streetNumber").val() != '' || $("#streetName").val() != '' || $("#city").val() != '' || $("#zipcode").val() != ''; 
       } 
      } 
     }, 
     zipcode: { 
      required: { 
       depends: function(){ 
        return $("#streetNumber").val() != '' || $("#streetName").val() != '' || $("#city").val() != '' || $("#state").val() != ''; 
       } 
      } 
     } 
    }, 
    messages: { 
     streetNumber: {required: "Must provide full address"}, 
     streetName: {required: "Must provide full address"}, 
     city: {required: "Must provide full address"}, 
     state: {required: "Must provide full address"}, 
     zipcode: {required: "Must provide full address"} 
    }, 
    highlight: function(element, errorClass, validClass) { 
     $(element).addClass(errorClass).removeClass(validClass); 
    }, 
    unhighlight: function(element, errorClass, validClass) { 
     $(element).removeClass(errorClass); 
    }, 
    errorPlacement: function(error, element) { 
     var n = element.attr("name"); 
     if (n == "streetNumber" || n == "streetName" || n == "city" || n == "state" || n == "zipCode") 
       error.insertAfter("#zipcode"); 
    } 
}); 

Кроме того, пытаясь получить нужную функциональность блика, я также интересно, если есть более разумный способ для достижения «все или ничего» входные группы, которые не включают беспорядок условных операторов. Возможно, я могу использовать группу ввода формы?

Answer 1

Вам нужно добавить функцию на фокус e vent, то, когда пользователь покинет поле, поля формы будут обновляться.

Это трудно, потому что вы используете плагин, так что все вызовы происходит внутри этого, но я думаю, что-то, как это будет работать:

var inputs = $('form').find('input'); 
inputs.focus(function() { 
    inputs.each(function() { 
     $(this).removeClass('error'); 
    }); 
}); 

Просто придерживайтесь это в вашем коде вне валидации Инициализатором.

Было бы еще лучше, если вы определили переменную ERRORCODE вне валидатора, а затем использовал этот вар в обеих функциях, например:

var errorClass = 'error'; 
$('form').validate({ 
    errorClass: errorClass, 
... 
... 
}); 

var inputs = $('form').find('input'); 
inputs.focus(function() { 
inputs.each(function() { 
    $(this).removeClass(errorClass); 
}); 
}); 

Answer 2

вы можете попробовать добавить метод в снятия выделения: что-то вроде

$('.error').removeClass(errorClass); 

или определить соответствующие ресурсы и сделать

$('.relatedInputs').removeClass(errorClass); 

можно также добавить функцию OnChange как

function(el){ 
    if(el.val() == ''){ 
    $('.relatedInputs').removeClass(errorClass); 
    } 
} 

Answer 3

Я был в состоянии получить желаемую функциональность с помощью этого:

onfocusout: function(element) { 
    var inputs = $(element).closest('form').find('input, select'); 
    inputs.each(function() { 
     if ($(this).valid()) 
      $(this).removeClass('error'); 
    }); 
} 

Это было вдохновлено другим сообщением и ответом DoubleA. Я не тестировал его полностью, чтобы проверить, не регрессирует ли он, но пока это работает.