Как использовать проверку Jquery на переключателе с соответствующими полями?

Question

Моя проблема касается проверки jquery. У меня есть форма, и проверка работает над полем ввода, но я не понимаю, как использовать проверку на переключателе, потому что у меня есть три переключателя, и пользователь может выбрать только одну. Все переключатели имеют свои поля. Я должен установить валидацию на нем.

Пример: я выбираю первое радио, затем пользователь должен также ввести поля book1 и book2. Если вы выбрали второе радио, тогда пользователь должен ввести значение в поля fruit1 и fruit2.

Если пользователь выбрал только радиокнопку и не заполнил поля, а нажал кнопку "Отправить", то должна отобразиться проверка.

Я попробовал код. Это работает для первой радиокнопки, но что если любой пользователь выберет вторую радиокнопку?

Это вывод, который я получаю.

Радиокнопка Книга проверяется с помощью проверки Jquery, если поля пусты

Обратите внимание, здесь я выбираю фрукты и нажимаю кнопку подтверждения, но проверка не отображается

Причина в том, что я не получаю, потому что я добавил только проверку радио-кнопки книги Теперь, как использовать для фруктов и предметов?

book1: {required: true},
book2: {required: true}

$(document).ready(function() {
  $("input[name='books_fruit_sub']").click(function() {
    var test = $(this).val();
    $(".show_fields").hide();
    $("#show" + test).show();
  });


  $('#form').validate({ // initialize the plugin
    rules: {
      mobile: {
        required: true,
        number: true,
        minlength: 10,
        maxlength: 10
      },
      book1: {
        required: true
      },
      book2: {
        required: true
      }
    },
    submitHandler: function(form) { // for demo
      form.submit();

    }
  });
});

ul {
  text-decoration: none;
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
}

.error {
  color: red;
}

<form action="" id="form">
  <input type="text" name="mobile" placeholder="Mobile">

  <ul>
    <li>
      <input type="radio" name="books_fruit_sub" id="books" value="books" checked>
      <label for="books">Books</label>
    </li>
    <li>
      <input type="radio" name="books_fruit_sub" id="fruit" value="fruit">
      <label for="fruit">Fruit </label>
    </li>

    <li>
      <input type="radio" name="books_fruit_sub" id="subject" value="subject">
      <label for="subject">Subject </label>
    </li>
  </ul>

  <div>
    <div class="show_fields" id="showbooks">
      <input type="text" name="book1" placeholder="Book 1">
      <input type="text" name="book2" placeholder="Book 2">
    </div>

    <div class="show_fields" id="showfruit" style="display: none;">
      <input type="text" name="fruit1" placeholder="Fruit 1">
      <input type="text" name="fruit2" placeholder="Fruit 2">
    </div>

    <div class="show_fields" id="showsubject" style="display: none;">
      <input type="text" name="subject1" placeholder="Subject 1">
      <input type="text" name="subject2" placeholder="Subject 2">
    </div>
  </div>

  <input type="submit" name="send" value="Submit">
</form>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>

Answer 1

Удалите правило для book1 и book2 из инициализации валидатора, и в свой обработчик кликов просто добавьте это

$(".show_fields").find("input").removeAttr("required"); $("#show" + test).find("input").attr("required" , "required");

Также в html добавьте обязательные атрибуты для обоих входов book1 и book2

Answer 2

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

book1: {
    required: function() {
        return $('#books').is(':checked');
    }
},
book2: {
    required: function() {
        return $('#books').is(':checked');
   }
}, 
fruit1: {
    required: function() {
        return $('#fruit').is(':checked');
    }
},
fruit2: {
    required: function() {
        return $('#fruit').is(':checked');
    }
},
..

Чтобы быть последовательным, используйте множественное число "fruits" и "subjects", как вы сделали для "books" для своих радиокнопок.

Здесь - ваш модифицированный и рабочий код в plunker.

Answer 3

Вам не нужен jQuery для этого. Используя ES20xx, data-attribute и css, довольно легко создать свою собственную проверку формы. Давайте просто для удовольствия разработаем пример на основе вашего кода.

• Нам нужна функция, чтобы определить выбранное значение переключателя, это checkRadio во фрагменте;
• Нам нужна функция, чтобы показать или скрыть поля, относящиеся к выбору переключателя, это switchFieldsBasedOnRadioChoice во фрагменте. Эта функция активируется clickHandling. Мы используем выбранное значение из checkRadio, чтобы идентифицировать div#show[chosen value]], чтобы иметь возможность показать правый элемент div, содержащий входные элементы, принадлежащие выбранному значению;
• Нам нужен объект, содержащий несколько методов для проверки полей, обозначенных в html data-check и активированных значением [data-check], он называется fieldChecks;
• Нам нужна функция обработчика для кнопки (отправить), которая проверит все поля, обозначенные [data-check] на достоверность значения поля, и предупредит, если значение поля недопустимо, то есть checkValues, активировано clickHandling;
• Мы также создаем обработчик focusin, который удаляет предупреждения из предыдущих входных значений, проверяет, нажимает ли пользователь одно из полей формы или фокусируется на нем;
• Мы используем data-attribute и css для стилизации и отображения значений предупреждений. Каждый ввод текста заключен в div. Мы используем класс css .invalid for (контейнер полей ввода) - div, чтобы стилизовать предупреждения для содержащихся полей ввода (если применимо).
• Примечания
  • обработчики (click, focusin) в этом фрагменте используют делегирование события .
  • проверка на стороне клиента никогда недостаточно. Вы должны всегда проверять значения полей на стороне сервера, прежде чем обрабатывать их на сервере.

см. Также

// check value of a radio button
const checkRadio = name => {
  const isChecked = 
    Array.from(document.querySelectorAll(`[name='${name}']`))
      .filter(rb => rb.checked);
    return isChecked.length ? isChecked[0].value : null;
};
// validity checks for field values ([data-check])
const fieldChecks = {
  mobile: value => { 
    const valueClean = value.replace(/[^\d]/g, "");
    return {
      cando: valueClean.length === 10,
      instruction: "Invalid: need 10 digits, you can use spaces and '-'"
    };
  },
  booksOrFruits: value => ({
    cando: value.trim().length >= 5,
    instruction: "Invalid: all fields ≥ 5 characters"
  }),
};

// add event listeners
document.addEventListener("click", clickHandling);
document.addEventListener("focusin", removeWarnings);

// click handling delegate
function clickHandling(evt) {
  const origin = evt.target;
  if (origin.type === "radio") {
    return switchFieldsBasedOnRadioChoice(origin);
  } else if (origin.id === "validate") {
    return checkValues();
  }
}

// focusin handling delegate: remove warnings on focus 
function removeWarnings() {
  console.clear();
  Array.from(document.querySelectorAll(".notvalid"))
    .forEach( el => el.classList.remove("notvalid") );
}

// check all field values  and warn for invalid values in required fields
function checkValues() {
  console.clear();
  const checks = Array.from(document.querySelectorAll("[data-check]"));
  let cando = true;
  checks.forEach( input => {
      // check for existence of input.dataset.check
      if (!fieldChecks[input.dataset.check]) {
        throw new Error(
          `You forgot to add '${input.dataset.check}' to fieldChecks!`
        );
      }
      const parent = input.parentNode;
      
      // don't check input values from parent class "show_fields hidden"
      if (parent.classList.contains("show_fields") 
        && parent.classList.contains("hidden")) {
        return false;
      }
      
      // perform the check denoted by [data-check] from the input field
      const fieldChck = fieldChecks[input.dataset.check](input.value);
      
      // if invalid value, use css/data-attributes to style a warning      
      if (!fieldChck.cando) {
        parent.classList.add("notvalid");
        if (fieldChck && fieldChck.instruction) {
          parent.dataset.instruction = fieldChck.instruction;
        }
        cando = false;
      } else {
        parent.classList.add("valid")
      }
    } );
   // all fields checked out ok 
   if (cando) { console.log("you're ok"); }
}

// show input fields belonging to a chosen radio input field
function switchFieldsBasedOnRadioChoice(origin) {
  Array.from(document.querySelectorAll(".show_fields"))
      .forEach(v => v.classList.add("hidden"))
  const chosenValue = checkRadio(origin.name);
  document.querySelector(`#show${chosenValue}`)
     .classList.remove("hidden");
}

body {
  margin: 2em;
  font: normal 12px/15px verdana, arial, sans-serif;
}
input[type=text] {
  margin: 0.3em 0.3em 0 0;
  padding: 2px 4px;
}
button {
  margin-top: 0.3em;
}
/* fields originating from radio choice */
.show_fields {
  display: table-row;
  visibility: "visible";
  opacity: 1;
  transition: opacity ease-in 0.5s 0s;
}
.hidden {
  opacity: 0;
  transition: opacity ease-out 0.1s 0s;
  visibility: collapse;
}
/* styling related to validation */
.notvalid input {
  border: 1px solid red;
}
.notvalid[data-instruction]:after {
  content: attr(data-instruction);
  margin-left: 0.2em;
}
.notvalid ::placeholder {
  color: red;
}
.valid:after {
  font-weight: bold;
  content: "\2714";
  color: green;
}
.valid input {
  color: green;
}

<ul>
  <li>
    <input type="radio" name="books_fruit_sub" id="books" value="books" checked>
    <label for="books">Books</label>
  </li>
  <li>
    <input type="radio" name="books_fruit_sub" id="fruit" value="fruit">
    <label for="fruit">Fruit </label>
  </li>
</ul>

<div data-required>
  <input type="text" name="mobile" placeholder="mobile" data-check="mobile">
</div>
<div>
  <input type="text" name="notrequired" placeholder="not required">
</div>
<div class="show_fields" id="showbooks">
  <input type="text" name="book1" placeholder="Book 1" data-check="booksOrFruits">
  <input type="text" name="book2" placeholder="Book 2" data-check="booksOrFruits">
</div>
<div class="show_fields hidden" id="showfruit">
  <input type="text" name="fruit1" placeholder="Fruit 1" data-check="booksOrFruits">
  <input type="text" name="fruit2" placeholder="Fruit 2" data-check="booksOrFruits">
</div>

<button id="validate">Check</button>