如果选中复选框,则仅验证子输入字段formvalidation



我使用的是formvalidation.io中的jquery表单验证插件,我试图实现条件,就好像选中了复选框一样,然后生成所需的子表单字段,否则不验证表单。我如何使用formvalidationplugin生成规则。。。

<script>
  function showSchoolInfoFields(chk) {
    document.getElementById("div1").style.display = chk.checked ? "block" : "none";
  }
</script>
<input type="checkbox" id="chk1" value="1" onClick="showSchoolInfoFields(this);" /> <b class="account">click here, if the student is transferred from another school</b>
<div id="div1" style="display:none;">
  <div  class="col-sm-4 col-sm-push-1">
    <div class="text-center margin-vertical-20">
      <h3><i class="fa fa-university"></i> <?php echo get_phrase('school_information');?></h3>
    </div>
    <div class="form-group">
      <label class="control-label" for="school_name"><?php echo get_phrase('school_name');?></label>
      <input type="text" placeholder="Bal Batika Vidya Mandir" class="form-control" id="school_name" name="school_name" required="required">
    </div>
    <div class="form-group">
      <label class="control-label" for="school_address"><?php echo get_phrase('school_address');?></label>
      <input type="text" placeholder="Banepa 5, Kavre" class="form-control" id="school_address" name="school_address" required="required">
    </div>
    <div class="form-group">
      <label class="control-label" for="inputPhone"><?php echo get_phrase('school_phone_number');?></label>
      <div class="input-group">
        <span class="input-group-addon">
          <b><?php echo get_phrase('+977');?></b>
        </span>
        <input type="number" placeholder="01422786" class="form-control" id="inputPhone" name="school_phone" required="required">
      </div>
    </div>
  </div>
</div>

这是我对上述字段的表单验证代码

$(document).ready(function() {
$('#orderForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// This option will not ignore invisible fields which belong to inactive panels
excluded: ':disabled',
fields: {
school_name: {
    validators: {
        notEmpty: {
            message: 'The school name is required'
        },
        stringLength: {
            min: 5,
            max: 50,
            message: 'The school name must be more than 5 and less than 50 characters long'
        },
        regexp: {
            regexp: /^[a-zA-Zs]+$/,
            message: 'The school name can only consist of alphabetical and space'
        }
    }
},
school_address: {
    validators: {
        notEmpty: {
            message: 'The school address is required'
        }
    }
},
phone: {
    validators: {
        notEmpty: {
            message: 'The school phone is required'
        },
        stringLength: {
            min: 8,
            max: 15,
            message: 'The phone must be more than 8 and less than 15 characters long'
        },
        integer{
        message: 'school phone must be in integer';
    }
    }
}
}
});

相关内容

  • 没有找到相关文章

最新更新