Validate using jQuery based on input type = radio/checkbox/select

Question

I need to validate input fields like text, email, radio, checkbox, select. Lets say I have this :

<fieldset>
    <div class="form-top">
         <div class="form-bottom">
              <div class="form-group">
                   <label class="sr-only" for="form-first-name">First name</label>
                   <input type="text" name="form-first-name" placeholder="First name..." class="form-first-name form-control" id="form-first-name">
              </div>
              <div class="form-group">
                   <label class="sr-only" for="form-last-name">Last name</label>
                   <input type="text" name="form-last-name" placeholder="Last name..." class="form-last-name form-control" id="form-last-name">
              </div>
              <div class="form-group">
                   <input type="radio" name="gender" value="male"> Male<br>
                   <input type="radio" name="gender" value="female"> Female<br>
                   <input type="radio" name="gender" value="other"> Other  
              </div>
                   <div class="form-group">
                   <label class="sr-only" for="form-about-yourself">About yourself</label>
                   <textarea name="form-about-yourself" placeholder="About yourself..." class="form-about-yourself form-control" id="form-about-yourself"></textarea>
                   </div>
                   <button type="button" class="btn btn-next">Next</button>
        </div>
</fieldset>

In jQuery I use this to validate :

$('.registration-form .btn-next').on('click', function() {
        var parent_fieldset = $(this).parents('fieldset');
        console.log(parent_fieldset);
        var next_step = true;

        parent_fieldset.find('input[type="text"], input[type="radio"], input[type="password"], textarea').each(function() {
            if( $(this).val() == "" ) {
                $(this).addClass('input-error');
                next_step = false;
            }
            else {
                $(this).removeClass('input-error');
            }
        });

The input type=text and textarea validations are working but not the input type=radio. Any Idea ?

UPDATE 1 I'm working on a multi step form and I use this example and in this example I added in the first step

<div class="form-group">
     <input type="radio" name="gender" value="male"> Male<br>
     <input type="radio" name="gender" value="female"> Female<br>
     <input type="radio" name="gender" value="other"> Other  
</div>

Each radio button has value so $(this).val() is not empty...you have to check value of selected radio button — Divyesh Savaliya
– Divyesh Savaliya, Commented Mar 3, 2016 at 12:25

Quentin Roger · Accepted Answer · 2016-03-03 13:43:25Z

1

Don't check the ($this).val() for radio you should check :

($this).find(":selected").text();

EDIT

One little exemple :

$('.btn').on('click', function() {
  $("input[type='radio']").each(function() { 
  	var radioName= $(this).attr('name'); 
    var isChecked =$("input[name='"+radioName+"']:checked").val();
    
    if( $(this).val() != "" && isChecked){ 
      $("#result").html('success');
    } 
    else { 
      $("#result").html('error');
    }  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
     <input type="radio" name="gender" value="male"> Male<br>
     <input type="radio" name="gender" value="female"> Female<br>
     <input type="radio" name="gender" value="other"> Other  
</div>
<div id="result"></div>
<input type="button" class="btn" value="send"/>

edited Mar 3, 2016 at 13:43

answered Mar 3, 2016 at 12:29

Quentin Roger

6,5482 gold badges26 silver badges37 bronze badges

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

2 Comments

Neculai Andrei Over a year ago

I tryed this

parent_fieldset.find('input[type="text"], input:radio:checked, input[type="password"], textarea').each(function() {     		if( $(this).val() == "" ) {     			$(this).addClass('input-error');     			next_step = false;     		}     		else {     			$(this).removeClass('input-error');     		}

but is not working

Neculai Andrei Over a year ago

based on the code you provided I made some changes and it is working, I assume the checkbox and select are the same

Collectives™ on Stack Overflow

Validate using jQuery based on input type = radio/checkbox/select

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related