JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<div class="modal-body-text">
<p id="myModalBody"></p>
</div>
<form id="emailForm" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Email address</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="email" />
</div>
</div>
</form>
<div class="modal-footer">
<button id="submitModalButton" type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<input type="button" id="zzz" value="reset"/>
<input type="button" id="xxx" value="viewModal"/>
JavaScript
$('#emailForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
}
});
$("#zzz").click(function(){
$('#emailForm').bootstrapValidator("resetForm",true);
});
$("#xxx").click(function(){
$("#myModal").modal("show");
});