JSFiddle - React, Tailwind, and code Playground

by Ennio Sousa Sousa

HTML

<script src="https://www.okad.com.br/.s/src/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://www.okad.com.br/.s/src/uwnd.js?2"></script>
<script src="https://rawgit.com/enniosousa/f1a0bc03a65759a4b8fcbefa32a56d48/raw/069406e47b269a5180334a4bc87c5cdaa0d37d8c/waitingDialog.js"></script>
<div class="container">
    <form class="form-horizontal" id="FormContatoPaginaCliente">
        <div class="form-group">
            <label for="nome" class="col-sm-2 control-label">Nome</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="nome" name="nome" placeholder="Seu nome">
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">E-mail</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="email" name="email" placeholder="Seu e-mail">
            </div>
        </div>
        <div class="form-group">
            <label for="telefone" class="col-sm-2 control-label">Telefone</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="telefone" name="telefone" placeholder="Seu telefone">
            </div>
        </div>
        <div class="form-group">
            <label for="mensagem" class="col-sm-2 control-label">Mensagem</label>
            <div class="col-sm-10">
                <textarea class="form-control" rows="3" name="mensagem" placeholder="Sua mensagem"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Enviar</button>
            </div>
        </div>
    </form>
</div>

JavaScript

$('#FormContatoPaginaCliente').on('submit', function(event) {
    var form = $(this);
    event.preventDefault();
    var data = form.serializeArray().reduce(function(obj, item) {
        obj[item.name] = item.value;
        return obj;
    }, {});
    $.ajax({
        headers: {
            'Accept': 'application/json',
        },
        //beforeSend: function(ajax) {},
        dataType: 'json',
        method: 'POST',
        url: 'https://okad.azurewebsites.net/api/test/json',
        data: data,
        complete: function(ajax, textStatus) {
            // quando so dados submetidos não passam na validação
            if (ajax.status === 422 && ajax.responseJSON.hasOwnProperty('errors')) {
                FormValidator(form).validate(ajax.responseJSON.errors);
            } else {
                console.log(ajax);
                FormValidator(form).clearErrors();
            }
        }
    });
});
var FormValidator = function(form) {
    this.form = form;
    this.showLoader = function() {
		waitingDialog.show('Estamos enviando sua mensagem');
        return this;
    }
    this.hideLoader = function() {
        return this;
    }
    this.validate = function(errors) {
        clearErrors();
        displayErrors(errors);
        return this;
    }
    this.displayErrors = function(errors) {
        $.each(errors, function(field, messages) {
            var Input, FormGroup, HelpBlock, ErrorMessages;
            Input = form.find('[name="' + field + '"]');
            FormGroup = Input.closest('.form-group');
            HelpBlock = FormGroup.find('.help-block');

            FormGroup.addClass('has-error');

            ErrorMessages = messages.join('<br>');
            HelpBlock.length === 0 ? Input.after($('<span/>').attr('class', 'help-block').html(ErrorMessages).show()) : HelpBlock.html(ErrorMessages).show();
        });
        return this;
    }
    /*
     * Limpa as mensagens de erros
     */
    this.clearErrors = function() {
        form
     ...