JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.min.js"></script>
<div class="row clearfix">
<div class="col-md-2 column"></div>
<div class="col-md-8 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Some title..</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="POST" enctype="multipart/form-data" id="exercicio-form">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="nome" name="nome" placeholder="Enter with some name..">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"> <i class="glyphicon glyphicon-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div> <span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new">Search..</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="file" id="file">
...
JavaScript
$('#exercicio-form').validate({
rules: {
nome: {
minlength: 5,
required: true
},
file: {
required: true,
//accept: "image/jpeg, image/pjpeg"
accept: "video/mp4"
}
},
highlight: function (element, errorClass, validClass) {
console.log("highlight");
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function (element) {
console.log("success");
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
console.log("errorPlacement");
// if element is file type, we put the error message in its grand parent
if (element.prop("type") === "file") {
error.insertAfter(element.parent().parent());
} else {
error.insertAfter(element);
}
}
});
$("#submitExercicio").click(function (e) {
e.preventDefault();
if ($('#exercicio-form').valid()) {
$('#submitExercicio').button('loading');
} else {
alert("Invalid fields still!");
}
});