How to use multiple input field class name in jquery for validation

Question

Suppose I have a form of two input field

<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">

Now I want to validate these two input fields sing jquery. For that I am using

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

But here is not validation working. But if I have use

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

Validation is working fine.

But I want to use class otherwise I need to validate the for input fields for each id. If I can use class it will be easier for me to validate.

@CarstenLøvboAndersen....I don't want to validate all the form field. Just some selected fields.. That's why — Arafat Rahman
– Arafat Rahman, Commented Apr 4, 2019 at 7:33

Alex Shink · Accepted Answer · 2019-04-04 07:41:37Z

3

In the first case, using the selector input[class="require"], you select only fields that contain one class require. And you need to select the fields that contain this class. To do this, use the call through the class:

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

Do not forget the closing apostrophe.

Or you need to set a different general class for those elements that you need to validate (if the class required is not appropriate).

answered Apr 4, 2019 at 7:41

Alex Shink

3279 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maffekill · Accepted Answer · 2019-04-04 07:49:41Z

First think about if you really want to validate the fields with an onFocus. Doing so will validate them before the user has given any input. You might want to validate the input after a submit or other user action.

I've made a quick codepen to answer your problem. You can simply use "input.require.form-control" as the selector. Remember to not put in any spaces, since they are on the same element ()

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');
});
```

Hope this helps

satyanshu · Accepted Answer · 2019-04-04 08:06:32Z

0

simple way to do this is using class selector rather then attribute selector. here is the link with the solution.

$(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>

answered Apr 4, 2019 at 8:06

satyanshu

8910 bronze badges

Collectives™ on Stack Overflow

How to use multiple input field class name in jquery for validation

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related