JSFiddle - React, Tailwind, and code Playground

by Tony Montana

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Lato:300,400,700"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<button id="lancar-modal" type="button" class="btn btn-success btn-md" data-toggle="modal" data-target="#myModal">
Lançar modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <!-- Conteúdo do modal -->
        <div class="modal-content">
            <!-- Inicio do form, que vai encapsular todo o conteúdo do modal - header, body e footer -->
            <form name="login" method="post" id="form-login"  action="?">
                <!-- Cabeçalho do modal -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Login</h4>
                </div>
                <!-- Corpo do modal -->
                <div class="modal-body">
                    <div class="row">
                        <!-- Formulario input de email -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="Email">Email</label>
                                <input id="email" type="email" name="email" class="form-control" placeholder="Digite seu email" required="required">
                            </div>
                        </div>
                        <!-- Formulário da senha -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="Senha">Senha</label>
        ...

CSS

button {
    margin-top: 20px;
    margin-left: 15px;
}

#lancar-modal {
    border-radius: 0px;
    background-color: green;
}

.recaptcha-error {
    color: red;  
}

JavaScript

// Valida o envio do formulário
$( "#form-login" ).submit( function (event) {

    var recaptcha = $("#g-recaptcha-response").val();
        
    if ( recaptcha === "" ) {
        event.preventDefault();
        $( ".recaptcha-error" ).html("Racaptcha inválido!");
    }
});