由于缺少表单字段,表单验证无效

时间:2015-12-15 17:37:50

标签: javascript

我有一个带验证器的表单。用于表单验证的JS如下:



$(document).ready(function() {
  // Generate a simple captcha
  function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  };
  $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

  $('#defaultForm').bootstrapValidator({
    message: 'This value is not valid',
    fields: {
      field1: {
        message: 'The field is not valid',
        validators: {
          notEmpty: {
            message: 'The field is required and can\'t be empty'
          },
          stringLength: {
            min: 1,
            max: 30,
            message: 'The field must be more than 1 and less than 30 characters long'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_\.]+$/,
            message: 'The field can only consist of alphabetical, number, dot and underscore'
          }

        }
      },
      field2: {
        message: 'The field is not valid',
        validators: {
          notEmpty: {
            message: 'The field is required and can\'t be empty'
          },
          stringLength: {
            min: 1,
            max: 30,
            message: 'The field must be more than 1 and less than 30 characters long'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_\.]+$/,
            message: 'The field can only consist of alphabetical, number, dot and underscore'
          }

        }
      },
      field3: {
        message: 'The field is not valid',
        validators: {
          notEmpty: {
            message: 'The field is required and can\'t be empty'
          },
          stringLength: {
            min: 1,
            max: 30,
            message: 'The field must be more than 1 and less than 30 characters long'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_\.]+$/,
            message: 'The field can only consist of alphabetical, number, dot and underscore'
          }

        }
      },
      field4: {
        message: 'The field is not valid',
        validators: {
          notEmpty: {
            message: 'The field is required and can\'t be empty'
          },
          stringLength: {
            min: 1,
            max: 30,
            message: 'The field must be more than 1 and less than 30 characters long'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_\.]+$/,
            message: 'The field can only consist of alphabetical, number, dot and underscore'
          }

        }
      },
      field5: {
        message: 'The field is not valid',
        validators: {
          notEmpty: {
            message: 'The field is required and can\'t be empty'
          },
          stringLength: {
            min: 1,
            max: 30,
            message: 'The field must be more than 1 and less than 30 characters long'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_\.]+$/,
            message: 'The field can only consist of alphabetical, number, dot and underscore'
          }

        }
      },



      captcha: {
        validators: {
          callback: {
            message: 'Wrong answer',
            callback: function(value, validator) {
              var items = $('#captchaOperation').html().split(' '),
                sum = parseInt(items[0]) + parseInt(items[2]);
              return value == sum;
            }
          }
        }
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/nghuuphuoc/bootstrapvalidator/master/src/js/bootstrapValidator.js"></script>

<!-- form: -->
<form id="defaultForm" method="post" action="exam.php">
  <div class="form-group">
    <label class="col-lg-3 control-label">
      <?php echo "$field1";?>
    </label>
    <div class="col-lg-5">
      <input type="text" class="form-control" name="field1" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label">
      <?php echo "$field2";?>
    </label>
    <div class="col-lg-5">
      <input type="text" class="form-control" name="field2" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label">
      <?php echo "$field3";?>
    </label>
    <div class="col-lg-5">
      <input type="text" class="form-control" name="field3" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label">
      <?php echo "$field4";?>
    </label>
    <div class="col-lg-5">
      <input type="text" class="form-control" name="field4" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label">
      <?php echo "$field5";?>
    </label>
    <div class="col-lg-5">
      <input type="text" class="form-control" name="field5" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label" id="captchaOperation"></label>
    <div class="col-lg-2">
      <input type="text" class="form-control" name="captcha" />
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-9 col-lg-offset-3">
      <button type="submit" class="btn btn-primary">Sign up</button>
    </div>
  </div>
</form>
&#13;
&#13;
&#13;

包含标签的某些表单字段会在加载时通​​过js删除。因此,验证器可用,但相应的字段不可用,因此表单验证器不起作用。你能帮我解决一下这个问题吗?

0 个答案:

没有答案