Блог

Резюме: у меня есть форма с 5 входами: 3 ввода символов, которые принимают только текст алфавита, 1 ввод даты и 1 ввод символов, который принимает только числа. Когда пользователь нажимает кнопку отправки, по крайней мере 1 из 5 входных данных должен быть допустимым для выполнения.

Усилие: я настроил проверку с использованием if-else при вводе ключа для каждого из входных данных, где для 3 алфавитных входных данных требуется длина менее 50 и больше 2. Ввод даты должен быть меньше 31.12.2050, а для ввода числа требуется 7 символов. Я считаю, что я должен создать отдельную функцию для каждого метода проверки и возвращать true / false . Таким образом, кнопка отправки может искать логическое значение в сравнении с новым набором операторов.

Вот как выглядит каждый ввод:

 <div class="adv-searchbar">
   <div class="adv-searchbar__wrapper">
      <div class="adv-searchbar__wrapper__search-box">
         <span class="search__column-1">
            <input class="alphInput1" placeholder="" value="">
         </span>
         <span class="search__column-1">
            <input class="alphInput2" placeholder="" value="">
         </span>
         <span class="search__column-1">
            <input class="alphInput3" placeholder="" value="">
         </span>
         <span class="search__column-2">
            <input class="dateInput" placeholder="" value="">
         </span>
         <span class="search__column-2">
            <input class="numInput" placeholder="" value="">
         </span>
         <button type="submit" class="">submit</button>
         </div>
      </div>
   </div>
  

Введите с 1 по 3 (только алфавит, длины < 50 и > 2):

 $('.alphInput1, .alphInput2, .alphInput3').keyup(function (e) {
   let input = $(this);
   this.value = this.value.replace(/[^A-Za-z]/g, '');
   if (this.value.length <= 50 amp;amp; this.value.length >= 2) {
       console.log(this.value);
       $(this).css('border-color', 'rgba(0,0,0,0.33');
   }
   else{
       $(this).css('border-color', 'red');
   }
 });
  

Ввод 4 (максимум: 12/31/2050):

 $('.dateInput').keyup(function (e) {
   let input = $(this);
   if (input.prop('max') < input.val()) {
       $(this).css('border-color', 'red');
   } else $(this).css('border-color', 'rgba(0,0,0,0.33');
});
  

Введите 5 (длина должна быть 7):

 $('.numInput').keyup(function () {
   var val = this.value.replace(/D/g, '');
   var newVal = '';
   if (val.length > 4) {
       this.value = val;
   }
   if ((val.length > 3) amp;amp; (val.length < 6)) {
       newVal  = val.substr(0, 3)   '-';
       val = val.substr(3);
   }
   if (val.length > 5) {
       newVal  = val.substr(0, 3)   '-';
       newVal  = val.substr(3, 2)   '-';
       val = val.substr(5);
   }
   newVal  = val;
   this.value = newVal.substring(0, 11);
});
  

Итак, это функция, которую я создаю, и где мне нужна помощь:

 function checkFields() {
   // get all inputs
   let searchInputs = $('.adv-searchbar input');
   console.log(searchInputs);

   // check each input value
   var inputValues = searchInputs.map(function () {
      return $(this).val();
   }).toArray();
   console.log(inputValues);

   // if any input has correct value, enable button

   // else wait for a valid value
 }
  

До этого момента я могу видеть все значения входных данных в inputValue массиве, если я помещаю функцию в одну из функций ввода. Концептуально, я борюсь с тем, как я должен прогрессировать. Это самый эффективный / простой способ сделать это?

это выглядит неплохо. Более подходящим способом было бы вероятное определение элементов по свойствам, а не по классам (например, вместо alphInput3 добавьте свойство типа validate-alphanumeric

 <input validate-alphanumeric validate-rule-length=3 ...
  

или .. вы всегда можете использовать существующий фреймворк, такой какhttps://jqueryvalidation.org /