Как использовать несколько классов имени поля ввода в JQuery для проверки

Question

Предположим, у меня есть форма из двух полей ввода

<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
<input type="text" name="form-age" placeholder="age" class="form-first-name form-control require" id="age">

Теперь я хочу проверить эти два поля ввода sing jquery.Для этого я использую

$('.registration-form input[class="require"]).on('focus', function() {
    $(this).addClass('input-error');
});

Но здесь не работает проверка.Но если я использую

$('.registration-form input[id="name"]).on('focus', function() {
    $(this).addClass('input-error');
});

Проверка работает нормально.

Но я хочу использовать class, в противном случае мне нужно проверить поля ввода для каждого id.Если я смогу использовать class, мне будет проще проверить.

Answer 1

В первом случае, используя селектор input[class="require"], вы выбираете только те поля, которые содержат один класс require.И вам нужно выбрать поля, которые содержат этот класс.Для этого используйте вызов через класс:

$('.registration-form .require').on('focus', function(){
  $(this).addClass('input-error');
});

Не забывайте закрывающий апостроф.

Или вам нужно установить другой общий класс для тех элементов, которые вам нужно проверить(если класс required не подходит).

Answer 2

Простой способ сделать это - использовать селектор класса, а не селектор атрибута. вот ссылка с решением.

$(document).ready(function(){

$('.registration-form .require').on('focus', function() {
    $(this).addClass('input-error');
    $('div').append('<br />'+this.id + ': ' +this.classList.value);   
});

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class = "registration-form">
  <input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
  <input type="text" name="form-age" placeholder="age" class="form-first-name form-control require" id="age">
  <div></div>
</form>

Answer 3

Сначала подумайте, действительно ли вы хотите проверить поля с помощью onFocus.Это подтвердит их, прежде чем пользователь предоставит какие-либо данные.Возможно, вы захотите проверить ввод после отправки или другого действия пользователя.

Я сделал быстрый кодовый запрос, чтобы ответить на вашу проблему.Вы можете просто использовать «input.require.form-control» в качестве селектора.Не забудьте не ставить никаких пробелов, так как они находятся на одном элементе ()

https://codepen.io/anon/pen/yrejOG

HTML

```
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
<input type="text" name="form-age" placeholder="age" class="form-first-name form-control require" id="age">
```

JQuery

```
$( "input.require.form-control" ).on( "focus", function() {
 $(this).addClass('input-error');
});
```

Надеюсь, это поможет