check form validation on jquery - php

Question

I'm using form validation jquery. And form input like this
<form id="form-valid">
<select id="country" name="country" class="input-group form-control input-sm">
<option value="Asia">Asia</option>
<option value="America">America</option>
<option value="Eropa">Eropa</option>
<option value="Africa">Africa</option>
<option value="Australia">Australia</option>
</select>
<input type="text" id="codetax" name="codetax"><input>
<select id="status" name="status" class="input-group form-control input-sm">
<option value="small">samll island</option>
<option value="big">big island</option>
<option value="medium">medium island</option>
</select>
<button class="btn btn-default btn-primary btn-sm btn-form-filter form-control" data-target="tmppo" id="btnsave" type="button">Save</button>
</form>
But my problem is, i need to check if country are Asia, taxcode and status must filled. But if country not Asia, taxcode and status can be empty. How do i did that when i'm using submit button?? I'm still new about jquery form validate. Pls help me.
Update ok it's works now, i do this on my from validate using depends
$('#form').validate({
errorElement: 'span',
errorClass: 'help-block',
rules: {
country: {
required: true
},
taxcode: {
required: {
depends: function(element) {
if ($('#country').val() == 'Asia') {
return true;
} else {
return false;
}
}
}
},
},
messages: {
codetax : "Pleasa instert taxcode
},
});
And on code html i have to use "name" to get rules. For all tq for helping me :)

Answer 1

I think you want to use the built-in method supplied by the validate library via .addMethod() found on the documentation site. I modified your form to better conform.
<script>
$(document).ready(function() {
// Add the method here, you can modify the code inside as need be
$.validator.addMethod("country", function(value, element) {
if(value == 'Asia') {
var getCodeTax = $('input[name=codetax]').val();
if(getCodeTax === '') {
return false;
}
}
return true;
}, 'You must select tax code');
$('form').validate({
rules: {
status:"required",
// This applies the country method above to the country dropdown
country: "country"
},
messages: {
}
});
});
</script>
<form id="form-valid" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<select name="country" id="country" class="input-group form-control input-sm">
<option value="">Select</option>
<option value="Asia">Asia</option>
<option value="America">America</option>
<option value="Eropa">Eropa</option>
<option value="Africa">Africa</option>
<option value="Australia">Australia</option>
</select>
<input type="text" id="codetax" name="codetax" />
<select id="status" name="status" class="input-group form-control input-sm">
<option value="small">samll island</option>
<option value="big">big island</option>
<option value="medium">medium island</option>
</select>
<input class="btn btn-default btn-primary btn-sm btn-form-filter form-control" value="save" data-target="tmppo" id="btnsave" type="submit">
</form>

Answer 2

You create a function to check what type of country selected on button click event
$( "btnsave" ).click(function() {
var country = $("country").val();
if (country == 'Asia')
{
//show required message here.
}
}

Answer 3

Change type of the button to submit.
$(document).on('submit', '#form-valid' function(e){
var country = $("#country").val();
if(country == 'Asia'){
if($('#codetax').val()=="" || $('#status').val()==""){
e.preventDefault();
//now form won't submit. Still need to add error messages.
}
}
});
If you don't want to change the type of button to submit then :
$(document).on('click', '#btnsave' function(e){
var country = $("#country").val();
if(country == 'Asia'){
if($('#codetax').val()!="" && $('#status').val()!=""){
$('#form-valid').submit();
}
else{
//add your error messages
}
}
});