Question

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

以下是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>

以下是验证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();
            });
        }

    });

我认为只是在顶行添加一些内容（至少是电子邮件字段input[type="email"]）会执行此操作，但事实并非如此。

Answer 1

注意：我最终切换到了实际的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,

    }, 
}

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

1 个答案: