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_id').validate({
    rules:{
        name : 
        {
            required: true
        },
        email : 
        {
            required: true,
            email : true
        },
        and so on
    },
    messages:{
        name : 
        {
            required: "message"
        },
        email : 
        {
            required: "message",
            email : "message"
        }
    }
});

您可以将自定义验证添加到此方法中。

Answer 2

您的代码有什么问题，因为您没有将验证组件放入＆＃39; form＆＃39;您还必须在运行时绑定验证，而不是在按钮单击内。要使用jquery验证库，您必须使用＆＃39; form＆＃39;标签。这是您更新的代码：

＆＃13;

$('#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");
});

＆＃13;

<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>

＆＃13;

<强>更新你的第二个问题：

我在我的表单中有4个部分，如农民身份添加。我可以用吗 jquery验证验证里面的数据？

答案：您可以像这样添加每个字段：

＆＃13;

$('#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");
});

＆＃13;

<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>

＆＃13;

如何使用onclick函数进行验证

2 个答案: