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

// 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.info("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>