How Can I validate different types of inputs/fields with this jQuery Pluggin?

Question

I'm working with a multi-step form. The fields are styled by bootstrap and the validations are done with jQuery. Right now only the text-fields are validating (like name, last name) but not: email, tel, any radio buttons or selectors etc. I need these forms to validate as well. But I also need this form to make an HTTP POST (probably with PHP, upon click of the next, and submit button which I will address in another question.

Here are a couple of my fields in html

<div class="form-bottom">
    <div class="form-group">
        <label for="sel2">choose an option (Choose One)</label>
        <select class="form-control input-lg" id="sel2">
            <option value="" disabled="" selected="" style="display: none;">Select One</option>
            <option>First Option</option>
            <option>An Option</option>
            <option>Another Option</option>
        </select>
    </div>
    <div class="form-group">
        <label for="pwd">Email</label>
        <input type="Email" class="form-control input-lg" id="pwd" placeholder="johndoe@gmail.com">
    </div>   

Below is the validating jQuery method:

$('.registration-form fieldset:first-child').fadeIn('slow');

$('.registration-form input[type="text"], .registration-form input[type="password"],  .registration-form textarea').on('focus', function() {
    $(this).removeClass('input-error');
});//.registration-form input[type="tel-lg"],



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

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

        if( next_step ) {
            parent_fieldset.fadeOut(400, function() {
                $(this).next().fadeIn();
            });
        }

    });

I would think just adding something, at least the email field input[type="email"] , to the top line would do this, but it does not.

Answer 1

Note: I wound up switching to the actual jQuery-validator pluggin. It was much easier to use, and I would suggest it for anyone focusing on front-end Validations.

http://jqueryvalidation.org/documentation/

EX:

 $('.form3').validate({ // initialize plugin
   // ignore:":not(:visible)",      
   rules: {
    Surgery_Year: {  

      required: true, 
      number: true,

    }, 

    Has_Surgery: { 
      required: true,
      number: false,
    },

    Has_Rev_Surgery: { 
      required: true,
      number: false,
    },

    Rev_Surgery_Year: { 
      required: true, 
      number: true,

    }, 
}