Лучший способ проверки почтовых ящиков с помощью jQuery

#javascript #jquery #forms #validation

#javascript #jquery #формы #проверка

Вопрос:

у меня есть пара групп переключателей на моей веб-странице, и вот как я решил проверить группы

 function validateAppRXForm() {
    if($('input[name="creativity"]:checked').length == 0 ||
    $('input[name="intelligence"]:checked').length == 0 ||
    $('input[name="initiative"]:checked').length == 0 ||
    $('input[name="motivation"]:checked').length == 0 ||
    $('input[name="development"]:checked').length == 0 ||
    $('input[name="vision"]:checked').length == 0 ||
    $('input[name="Integrity"]:checked').length == 0 ||
    $('input[name="Confidentiality"]:checked').length == 0 ||
    $('input[name="Interpersonal"]:checked').length == 0 ||
    $('input[name="speed"]:checked').length == 0 ||
    $('input[name="accuracy"]:checked').length == 0 ||
    $('input[name="ability"]:checked').length == 0 ||
    $('input[name="assessmnt"]:checked').length == 0 ||
    $('input[name="errors"]:checked').length == 0){
       alert('some fields were left blank..');
       // alert('some fields were left blank...');
       return false;
    }
 }

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

  //create the array by splitting string names.... 
 let arr = String('creativity;intelligence;initiative;motivation;development;vision;Integrity;Confidentiality;Interpersonal;speed;$accuracy;ability;assessmnt;errors').split(';');

//loop through and validate...
function validateAppRXForm() {
   arr.forEach(name => {
      if($('input[name=`${name}`"]:checked').length == 0){
         alert('some fields were left blank..');
         return false;
      }
   });
}

но это не работает…

1. @mplungjan это все еще работает, я просто предпочитаю использовать его…

2. Обратите внимание, что return in forEach не возвращает во внешнюю функцию. Использование some() было бы более чистым подходом

Ответ №1:

Вы можете использовать Array#every() with is(':checked') как более короткий способ записи, чем проверка длины

 //create the array by splitting string names.... 
let arr = 'creativity;intelligence;initiative'.split(';');

function isValid(){
  return arr.every(name => $(`input[name='${name}']`).is(':checked'))
}

console.log('On load:', isValid())

// check one of each
arr.forEach(name => $(`input[name='${name}']`).first().prop('checked', true))
console.log('After checked:', isValid())

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  Creativity:
  <label><input type="radio" name="creativity" value="yes" />Yes</label>
  <label><input type="radio" name="creativity" value="no" />No</label>
  <br/> Intelligence:
  <label><input type="radio" name="intelligence" value="yes" />Yes</label>
  <label><input type="radio" name="intelligence" value="no" />No</label>
  <br/> Initiative:
  <label><input type="radio" name="initiative" value="yes" />Yes</label>
  <label><input type="radio" name="initiative" value="no" />No</label>
  <br/>
  <input type="submit" />
</form>

Ответ №2:

Вот так, хотя я рекомендую не использовать непроверенные радиобоксы, а вместо этого выбирать, если вы хотите протестировать выбор none / a / b.

 //create the array by splitting string names.... 
let arr = 'creativity;intelligence;initiative'.split(';');
$(function() {
  $("form").on("submit", function(e) {
    if (arr.filter(item => $(`input[name=${item}]:checked`).length === 0).length > 0) {
      console.log("some rads not checked");
      e.preventDefault();
    }
  })
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  Creativity:
  <label><input type="radio" name="creativity" value="yes" />Yes</label>
  <label><input type="radio" name="creativity" value="no" />No</label>
  <br/> Intelligence:
  <label><input type="radio" name="intelligence" value="yes" />Yes</label>
  <label><input type="radio" name="intelligence" value="no" />No</label>
  <br/> Initiative:
  <label><input type="radio" name="initiative" value="yes" />Yes</label>
  <label><input type="radio" name="initiative" value="no" />No</label>
  <br/>
  <input type="submit" />
</form>