JSFiddle - React, Tailwind, and code Playground

by opeta

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://limonte.github.io/sweetalert2/dist/sweetalert2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://limonte.github.io/sweetalert2/dist/sweetalert2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<div class="modal fade" id="myModal" data-toggle="meumodal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
<div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Devolver documento</h4>
            </div>
			<div class="modal-body">	
		<form action="" method="post" id="devolve">
					<div class="col-sm-12">
						<div class="form-group has-feedback">
                            <label for="message-text" class="control-label">Motivo da devolução:</label>
							<textarea name="exigencia" id="exigencia" class="form-control"></textarea>
							<span class="form-control-feedback glyphicon"></span>
                        </div>
					</div>
			</div>
	<div class="modal-footer">
	<a class="btn btn-default" id="resetForm"><i class="fa fa-refresh"></i>Limpar</a>
					<input name="id_documento" id="id_documento" type="hidden" value="<?php echo $id_doc; ?>" />
					<input name="action" id="action" type="hidden" value="devolver" />
		<input type="submit" id="btn_salvar" class="btn btn-primary" value="enviar">
		</form>
       ...

JavaScript

$(document).on('click', '[data-toggle="meumodal"]', function(event) {
  event.preventDefault();
  target = $(this).attr("data-target");
  content = $(this).attr("href");
  $(target + ".modal .modal-content").load(content, function() {
    $(target).modal('show');
  });
});
$('#resetForm').on('click', function(){
document.getElementById("devolve").reset();
});


(function($,W,D)
{
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules
            $("#devolve").validate({
				
                rules: {
                    exigencia: "required" 
					
					
                },
                messages: {
                    exigencia: "* Informe o motivo da devolução",
                },
				highlight: function (element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error')
        $(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        $(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
    },
    //errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
                submitHandler: function(form) {
                    SalvarRegistro();
                }
            });
        }
    }

    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);



function SalvarRegistro(){

			$("#btn_salvar").addClass('bloqueia');
			var dados = $('#devolve').serialize();
    ...