<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <form class="form-horizontal" id="frmcontatoazul"> <fieldset> <!-- Form Name --> <legend>Contato</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="txtinputnome">Nome</label> <div class="col-md-8"> <input id="txtinputnome" name="txtinputnome" placeholder="Escreva seu nome completo" class="form-control input-md" required="required" type="text" /> <span class="help-block">help</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="txtinputemail">Email</label> <div class="col-md-8"> <input id="txtinputemail" name="txtinputemail" placeholder="Coloque um email válido" class="form-control input-md" required="required" type="email" /> <span class="help-block">help</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="txtinputassunto">Assunto</label> <div class="col-md-8"> <input id="txtinputassunto" name="txtinputassunto" placeholder="Informe do que se trata" class="form-control input-md" required="required" type="text" /> <span class="help-block">help</span> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="txtinputarea">Mensagem</label> <div class="col-md-8"> <textarea class="form-control" id="txtinputarea" rows="6" name="txtinputarea" placeholder="Escreva sua opinião, crítica ou sugestão para o site"></textarea> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="btnenviar"></label> <div class="col-md-8"> <button id="btnenviar" name="btnenviar" class="btn btn-primary btn-lg">Enviar</button> </div> </div> </fieldset> </form> </div> </div>

#frmcontatoazul { padding:18px; width:680px } #frmcontatoazul fieldset { border:1px double #20a; padding:10px; border-radius:4px } #frmcontatoazul fieldset .form-group { color:#30a } #frmcontatoazul fieldset legend { background-color:#20a; color:#ffe; padding:10px; margin:4px; margin-bottom:20px; border-radius:8px } #frmcontatoazul #singlebutton { margin-top:20pt } #frmcontatoazul .help-block { display:none }

$(document).ready ( function() { $('#btnenviar').click ( function(e) { $inNome =$('#txtinputnome'); $inEmail =$('#txtinputemail'); $inAssunto =$('#txtinputassunto'); $inArea =$('#txtinputarea'); $btnEnviar =$('#btnenviar'); var emailformat = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; var latinformat=/[^a-zA-Z\-\'\ ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏàáâãäåæçèéêëìíîïÐÑÒÓÔÕÖØÙÚÛÜÝÞßðñòóôõöøùúûüýþÿ]/i; if($inNome.val().length<=2 || latinformat.test($inNome.val())) { e.preventDefault(); $('#txtinputnome + span').toggle().html("Informe um nome válido !"); $inNome.focus(); } else if(!emailformat.test($inEmail.val())) { e.preventDefault(); $('#txtinputemail + span').toggle().html("Informe um e-mail válido !"); $inEmail.focus(); } else if($inAssunto.val().length<=2 || !latinformat.test($inAssunto.val())) { e.preventDefault(); $('#txtinputassunto + span').toggle().html("Informe um assunto válido !"); $inAssunto.focus(); } else if($inArea.val().length<=2 || !latinformat.test($inArea.val())) { e.preventDefault(); $('#txtinputarea + span').toggle().html("Informe uma mensagem válida !"); $inArea.focus(); } } ) } );