Мгновенный запуск проверки JQuery для нескольких элементов

У меня есть четыре элемента, и каждый из них связан с другими относительно действительности. Например, элементами являются a, b, c и d. Если d пусто, пользователь должен ввести некоторые значения для a, b, c, а если a, b, c пусты, пользователь должен ввести некоторые значения для d. Я создал настраиваемую проверку, как вы можете видеть во фрагменте, но она, естественно, проверяет только сфокусированный ввод, поэтому, если вы дадите некоторые значения для a, b и c, он будет проверять только c, а для a и b вам нужно снова сфокусировать их. Я хочу, чтобы эта проверка запускалась в одно и то же время для всех этих входных данных, и если она вернет истину, объявить действительными все остальные. Не могли бы вы мне помочь?

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

Спасибо.

(function ($) {
        $.validator.addMethod('adreskontrol', function (value, element) {
            
            if ($("#d").val() == "" && ($("#a").val() == "" || $("#b").val() == "" || $("#c").val() == "")) {
                return false;
            }
            else {
                return true;
            }
        });

    }(jQuery));


    $.validator.unobtrusive.adapters.addBool('adreskontrol');

$('#btn').click(function() {
    if ($("#test").valid() === false) {
        //What to do if validation fails
    } else if ($("#test").valid() === true) {
        //Show the preview and let the user either make changes or submit the final result
    }
});

.input-validation-error
{
border:1px solid red;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.10/jquery.validate.unobtrusive.min.js"></script>



<form id = "test">
   a:  <input type = "text" name = "testa" class = "testa" id = "a" data-val-adreskontrol = "checka" data-val = "true">
<label for = "testa"></label>
</br>
   b:  <input type = "text" name = "testb" class = "testa" id = "b" data-val-adreskontrol = "checkb" data-val = "true">
<label for = "testb"></label>
</br>
   c:  <input type = "text" name = "testc" class = "testa" id = "c" data-val-adreskontrol = "checkc" data-val = "true">
<label for = "testc"></label>
</br>
   d:  <input type = "text"  name = "testd" class = "testa" id = "d" data-val-adreskontrol = "checkd" data-val = "true">
<label for = "testd"></label>
</br>
<input type = "submit" id = "btn" value = "Test"/>

</form>

просто чтобы прояснить вам: когда d пусто, только a, b, c требуются для отправки, а когда a, b, c пусты, только d требуется для отправки, чтобы пройти?

— 02.08.2018 17:16

Да, это правда. я отредактирую для лучшего примера.

— 03.08.2018 07:47

javascript jquery html validation unobtrusive-validation

02.08.2018 16:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

141

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Добавьте один и тот же класс для всех, а затем попробуйте подсчитать количество ошибок.

     if ($('.class_name').length > 0) {
}

03.08.2018 08:04

Ответ принят как подходящий

Я обработал это, перепроверив проверку формы при нажатии любого из этих входов, например:

(function ($) {
        $.validator.addMethod('adressCheck', function (value, element) {
            
            if ($("#d").val() == "" && ($("#a").val() == "" || $("#b").val() == "" || $("#c").val() == "")) {
                return false;
            }
            else {
                return true;
            }
        });

    }(jQuery));


    $.validator.unobtrusive.adapters.addBool('adressCheck');

   $(".adressInput").on("keyup", function () {
        $("#testForm").valid();
  });
    
    
  $('#btn').click(function() {
      if ($("#testForm").valid() === false) {

      } else if ($("#testForm").valid() === true) {

      }
  });

.input-validation-error
{
border:1px solid red;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.10/jquery.validate.unobtrusive.min.js"></script>



<form id = "testForm">
   a:  <input type = "text" name = "testa" class = "adressInput" id = "a" data-val-adressCheck = "checka" data-val = "true">
<label for = "testa"></label>
</br>
   b:  <input type = "text" name = "testb" class = "adressInput" id = "b" data-val-adressCheck = "checkb" data-val = "true">
<label for = "testb"></label>
</br>
   c:  <input type = "text" name = "testc" class = "adressInput" id = "c" data-val-adressCheck = "checkc" data-val = "true">
<label for = "testc"></label>
</br>
   d:  <input type = "text"  name = "testd" class = "adressInput" id = "d" data-val-adressCheck = "checkd" data-val = "true">
<label for = "testd"></label>
</br>
<input type = "submit" id = "btn" value = "Test"/>

</form>

17.08.2018 09:51

Другие вопросы по теме

Невозможно отобразить сообщение об ошибке в IE, но может отображаться в Chrome

Вызов .load внутри setInterval () работает только один раз

Получить определенные ключи массива обратно в запросе javascript ajax

Удалить элемент через WebAPI + jquery (ядро ASP.NET)

Как исправить проблему мерцания ввода в IE11 после применения маскировки?

Как отключить прелоадер для некоторых браузеров?

Angular 2 ngModelChange не работает во втором раскрывающемся списке

Измените атрибуты Id и name, уменьшив индекс в каждой строке

JQuery droppable: неправильный элемент drop в событии over

Расширение Chrome addEventListener + dispatchEvent результат для var

Мгновенный запуск проверки JQuery для нескольких элементов

Ответы 2

Другие вопросы по теме

Похожие вопросы