JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
<form id="contact" method="post" action="#">
<fieldset>
<label for="name-contact">NAME</label>
<input type="text" class="required input-xlarge" id="name-contact"
name="name-contact" value="" placeholder="" minlength="2" />
<select name="test" id="test">
<option></option>
<option>1</option>
<option>2</option>
</select>
<input type="text" name="phone" id="phone"/>
<input type="submit" />
</fieldset>
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
CSS
#docs {
display: block;
position: fixed;
bottom: 0;
right: 0;
}
JavaScript
$(document).ready(function () {
$("#contact").validate({
rules: {
"name-contact": {
required: true
},
"test":{
required:true
},
"phone":{
required:true,
minlength: function(element){
if($("#test").val()==1){
return 3;
}
else if($("#test").val()==2){
return 5;
}
else{
return 1;
}
}
}
},
messages: {
"name-contact": {
required: "Please, enter a name"
},
"test": {
required: "Please, enter"
},
"phone":{
minlength:"minlenght"
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
alert($("#test").val());
return false; // for demo
}
});
});