JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<div class="container">
<ul class="nav nav-pills" id="tabs">
<li class="active"><a href="#tab1" data-toggle="pill">Tab 1</a></li>
<li><a href="#tab2" data-toggle="pill">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<form class="form" id="form1">
<div class="form-group">
<label>Input 1</label>
<input id="input1" name="input1" type="text" class="form-control" />
</div>
<input id="Submit1" type="submit" class="btn btn-primary" value="Submit" />
</form>
</div>
<div class="tab-pane" id="tab2">
<form class="form" id="form2">
<div class="form-group">
<label>Input 2</label>
<input id="input2" name="input2" type="text" class="form-control" />
</div>
<input id="Submit2" type="submit" class="btn btn-primary" value="Submit" />
</form>
</div>
</div>
</div>
JavaScript
var form1 = $("#form1").validate({
ignore: '',
rules: {
"input1": "required"
}
});
var form2 = $("#form2").validate({
ignore: '',
rules: {
"input2": "required"
}
});
$("#form1").submit(function (e) {
e.preventDefault();
if (form1.valid() && form2.valid()) {
alert("Post Data");
} else {
alert("Not Valid");
}
});
$("#form2").submit(function (e) {
e.preventDefault();
if (form1.valid() && form2.valid()) {
alert("Post Data");
} else {
alert("Not Valid");
}
});