如何使用此jQuery插件验证不同类型的输入/字段？

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.

我正在使用多步骤表单。这些字段由引导程序设置样式,验证使用jQuery完成。现在只有文本字段正在验证(如姓名,姓氏)但不是:电子邮件,电话,任何单选按钮或选择器等。我也需要这些表单进行验证。但是我还需要这个表单来进行HTTP POST(可能是PHP,点击下一个,然后提交按钮,我会在另一个问题中解决)。

Here are a couple of my fields in html

以下是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="[e-mail]">
    </div>   

Below is the validating jQuery method:

下面是验证jQuery方法:

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

我认为只是在顶行添加一些东西,至少是电子邮件字段输入[type =“email”],就可以了,但事实并非如此。

1 个解决方案

#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.

注意:我最终切换到实际的jQuery-validator插件。它更容易使用,我会建议任何专注于前端验证的人。

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,

    }, 
}