JSFiddle - React, Tailwind, and code Playground

by felipepalazzo

HTML

<form id="fiveForm" method="post" action="http://www.smashingmagazine.com">
                            <h2>Olá!<br />Como podemos ajudar?</h2>
                            <div class="form-row required">
                                <input id="name" name="name" type="text" placeholder="Seu nome." style="width: 219px" />
                                <input id="lastName" name="lastName" type="text" placeholder="Sobrenome." style="width: 210px" />
                            </div>
                            <div class="form-row">
                                <input id="email" name="email" type="text" placeholder="Email" style="width: 219px" />
                                <input id="ddd" name="ddd" type="text" placeholder="DDD"  maxlength="5" style="width: 45px" />
                                <input id="phone" name="phone" type="text" placeholder="Telefone" style="width: 137px" />
                            </div>
                            <div class="form-row">
                                <textarea id="message" name="message" style="width: 461px" rows="8" placeholder="Mensagem" resizable="false"></textarea>
                            </div>
                            <span class="alert">* Todos os campos são obrigatórios</span>
                            <button id="sendButton" name="sendButton" value="1" type="submit">Enviar</button>
                        </form>

JavaScript

$('form #sendButton').click(function(){
    var status = true;
    var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    $('form input, textarea').each(function(){
        var v = $(this).val();
        var at = $(this).atrr('id');
        if($.trim(v).length <= 0){
            $(this).css({'border-color':'red'}).focus();            
         status = false;           
        }                    
    });
    return status;
    });