kupang lie kupang lie - 3 months ago 20
HTML Question

how to use validation with onclick function

I'm using jquery.validate plugin, here is my code I have tried

here is my 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>


here is my 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);
}
}
});
});


but i dont know what's wrong with my code, please help me.. thank you

Answer

What is wrong with your code is you did not put your validation component into 'form' also you must bind validation on the run-time, not inside button click. To use jquery validation library, you have to use 'form' tag. Here is your updated code:

$('#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>

UPDATE: Your second question:

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

Answer: You can add each field like this:

$('#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>