jquery - 如何使用 onclick 函数进行验证

Question

我正在使用 jquery.validate 插件，这是我试过的代码

这是我的 HTML:

<div id="farmer-identity-add">
<label class="col-sm-4 control-label">Nama <font color="red">*</font></label>
<input class="form-control required" id="farmerName" name="farmer[name]" type="text" value="">
</div>
<button class="btn btn-outline btn-primary" id="btn-next-add" type="button">Selanjutnya <i class="fa fa-chevron-right" aria-hidden="true"></i></button>

这是我的 jquery:

$('#btn-next-add').click(function(){
        $('#farmer-identity-add').validate({
            rules: {
                farmerName: {
                    required: true
                },
            },
            highlight: function(element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function(element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function(error, element) {
                if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });
});

但我不知道我的代码有什么问题，请帮助我..谢谢

Answer 1

您的代码有什么问题是您没有将验证组件放入“form”中，您还必须在运行时绑定(bind)验证，而不是在按钮点击内。要使用 jquery 验证库，您必须使用 'form' 标签。这是您更新后的代码:

$('#farmer-identity-add').validate({
  rules: {
    farmerName: {
      required: true
    },
  },
  highlight: function(element) {
    $(element).closest('.form-group').addClass('has-error');
  },
  unhighlight: function(element) {
    $(element).closest('.form-group').removeClass('has-error');
  },
  errorElement: 'span',
  errorClass: 'help-block',
  errorPlacement: function(error, element) {
    if (element.parent('.input-group').length) {
      error.insertAfter(element.parent());
    } else {
      error.insertAfter(element);
    }
  }
});

$('#btn-next-add').click(function() {
  $('#farmer-identity-add').validate().element("#farmerName");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

<form id="farmer-identity-add">
  <label class="col-sm-4 control-label">Nama <font color="red">*</font>
  </label>
  <input class="form-control required" id="farmerName" name="farmer[name]" type="text" value="">
</form>
<button class="btn btn-outline btn-primary" id="btn-next-add" type="button">Selanjutnya <i class="fa fa-chevron-right" aria-hidden="true"></i>
</button>

更新: 你的第二个问题:

i got 4 section like farmer-identity-add inside my form. can i use jquery validate to validate the data inside?

回答:您可以像这样添加每个字段:

$('#farmer-identity-add').validate({
  rules: {
    farmerName: {
      required: true
    },
    farmerSurname: {
      required: true
    }
  },
  highlight: function(element) {
    $(element).closest('.form-group').addClass('has-error');
  },
  unhighlight: function(element) {
    $(element).closest('.form-group').removeClass('has-error');
  },
  errorElement: 'span',
  errorClass: 'help-block',
  errorPlacement: function(error, element) {
    if (element.parent('.input-group').length) {
      error.insertAfter(element.parent());
    } else {
      error.insertAfter(element);
    }
  }
});

$('#btn-next-add').click(function() {
  $('#farmer-identity-add').validate().element("#farmerName");
  $('#farmer-identity-add').validate().element("#farmerSurname");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

<form id="farmer-identity-add">
  <label class="col-sm-4 control-label">Nama <font color="red">*</font>
  </label>
  <input class="form-control required" id="farmerName" name="farmer[name]" type="text" value="">
  <br>
  <label class="col-sm-4 control-label">Farmer Surname <font color="red">*</font>
  </label>
  <input class="form-control required" id="farmerSurname" name="farmer[surName]" type="text" value="">
</form>
<button class="btn btn-outline btn-primary" id="btn-next-add" type="button">Selanjutnya <i class="fa fa-chevron-right" aria-hidden="true"></i>
</button>