JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<title>
Test jQuery
</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
</head>
<body>
<form id="myform">
Text1: <input type="text" id="text1" name="text1" size="10" /><br>
Text2: <input type="text" id="text2" name="text2" size="10" /><br>
<input type="button" id="submitbutton" value="Validar" type="submit"/>
<br>
<span id="validationStatus"/>
</form>
</body>
</html>
CSS
span {
color: green;
}
span.invalid {
color:red;
}
JavaScript
$(document).ready(function() {
var _formRules = {
text1: {
required: function(elem) {
var text2_value = $("#text2").val();
return ($.trim(text2_value).length <= 0);
}
},
text2: {
required: function(elem) {
var text1_value = $("#text1").val();
return ($.trim(text1_value).length <= 0);
}
}
};
var _errorMessages = {
text1: {
required: ""
},
text2: {
required: ""
}
}
$("#submitbutton").click(function() {
var _handler = $("#myform").validate({
rules: _formRules,
messages: _errorMessages
});
var status = $("#validationStatus");
if(_handler.checkForm()) {
status.removeClass("invalid");
status.text("validation ok!");
} else {
status.toggleClass("invalid");
status.text("Pelo menos um campo deve ser preenchido!");
}
});
});