Как проверить 3 input сразу?

170

30 августа 2018, 23:40

Почему то у меня проверяет только один input вместо каждого с name=one. Кто может подсказать как сделать проверку каждого input name="one" ?

$(document).ready(function () { 
  var inputRequired = $( "input[name='one']" ); 
   
  $('button').on('click', function() { 
    if( !inputRequired.val() ) { 
        console.log("Error"); 
        $(this).parent().find("input[name='one']").val("").addClass('error'); 
    } else { 
        console.log("OK!"); 
    } 
  }) 
   
});

input { 
  display: flex; 
  margin: 5px; 
} 
button { 
  display: flex; 
  margin: 5px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
  <input class="date" type="text" name="one" >   
  <input class="name" type="text" name="one" > 
  <input class="money" type="text" name="one" > 
  <input class="price" type="text" > 
 
  <button>Click</button> 
</div>

Answer 1

Значение каждого input-а можно проверять отдельно с помощью метода each. Либо можно сразу отфильтровать input-ы с некорректными значениями с помощью метода filter
Класс error, надо полагать, нужно добавлять только тем input-ам, у которых некорректное значение
Также класс error стоит убирать у тех элементов, значение которых стало валидным

В итоге получается так:

$(document).ready(function() { 
  var $inputsRequired = $("input[name='one']"); 
 
  $("button").on("click", function() { 
    $inputsRequired.removeClass("error"); 
    var $incorrectInputs = $inputsRequired.filter(function() { 
        return this.value == ""; 
    }); 
    if ($incorrectInputs.length != 0) { 
      console.log("Error"); 
      $incorrectInputs.val("").addClass("error"); 
    } 
    else { 
      console.log("OK!"); 
    } 
  }); 
});

input { 
  display: flex; 
  margin: 5px; 
} 
button { 
  display: flex; 
  margin: 5px; 
} 
.error { 
  background-color: red; 
}

<div> 
  <input class="date" type="text" name="one"> 
  <input class="name" type="text" name="one"> 
  <input class="money" type="text" name="one"> 
  <input class="price" type="text"> 
  <button>Click</button> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

$(document).ready(function () {
  var inputRequired = $( "[name = 'one']" );
  $('button').on('click', function() {
    if( !inputRequired.val() ) {
        console.log("Error");
        $(this).parent().find("[name = 'one']").val("").addClass('error');
    } else {
        console.log("OK!");
    }
  });
});

Также более современно будет использовать вместо:

$(document).ready(function () {
  // Ваш код
});

Это:

$(function() {
  // Ваш код
});

Создание сайта для агентства недвижимости в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Работа с файлом, полученным из input “file” [закрыт]

Стоит задача изdocx документа импортировать текст в md

164

MySQL

MySql При получении данных из двух таблиц возникает ошибка: Column 'название колонки' in field list is ambiguous

Есть две таблицы связанные по двум колонкам

194

MySQL

Посчитать количество записей в связи - MySQL

Есть сервис вопросов и ответов и есть две таблицы:

174

MySQL

Правильное использование PIVOT в MS SQL

У меня есть запрос с кучей лефтджойнов

154