添加字母控件到输入

时间:2016-06-30 07:34:42

标签: jquery html

我的部分HTML输入:

    <form class="form" id="firstForm" novalidate="novalidate">  
       <div class="tab-content">
           <div class="tab-pane active" id="vtab1">
               <div class="form-group">
                  <label class="col-sm-4 control-label"><?php echo _("Hasta Adı"); ?></label>
                  <div class="col-sm-8">
                     <input type="text" name="firstname" id="firstname" class="form-control">
                  </div>
              </div>

              <div class="form-group">
                  <label class="col-sm-4 control-label"><?php echo _("Hasta Soyadı"); ?></label>
                  <div class="col-sm-8">
                     <input type="text" name="lastname" class="form-control">
                  </div>
              </div>
 <div class="form-group">
                        <label class="col-sm-4 control-label"><?php echo _("Hasta Yaşı"); ?></label>
                        <div class="col-sm-8">
                          <input type="text" name="age" class="form-control" required><label for="age" class="error"></label>
                        </div>
                      </div>

Jquery:

<script type="text/javascript">
$(function() {

    // With Form Validation Wizard
    var $validator = jQuery("#firstForm").validate({
    highlight: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    success: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-error');
    }
    });

    jQuery('#validationWizard').bootstrapWizard({
        tabClass: 'nav nav-pills nav-justified nav-disabled-click',
        onTabClick: function(tab, navigation, index) {
          return false;
        },
        onNext: function(tab, navigation, index) {
          var $valid = jQuery('#firstForm').valid();
          if(!$valid) {

            $validator.focusInvalid();
            return false;
          }
        }
    });
});
</script>

我想将字母控件添加到firstname和lastname。我不想为所有表单添加规则。如何在bootstrapwizard的下一个事件中使用jquery.validate.min.js库为特定输入添加一些规则?

1 个答案:

答案 0 :(得分:1)

self.presentingViewController中使用rules选项。请考虑以下示例。

jquery-validate plugin

要动态添加规则,您可以按以下方式执行:

var $validator = jQuery("#firstForm").validate({
    rules:{
        firstName:{
             required:true
             //any other similar rules
        },
        lastName:{
             required:true,
             //any other similar rules
        }
    },
    messages:{
        firstName:{
             required:"FirstName is required"
             //any other similar rule messages
        },
        lastName:{
             required:"LastName is required",
             //any other similar messages
        }
    }
    highlight: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    success: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-error');
    }
});
  

但请记住,在你写上面的行之前,你需要初始化   $("input[name=firstName]").rules("add", "yourcustomrule"); form

。{