"Formulário Bootstrap com Validação"
Bootstrap 3.0.0 Snippet by xrozix

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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"> <form class="well form-horizontal" action=" " method="post" id="contact_form"> <fieldset> <!-- Form Name --> <legend>Contact Us Today!</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label">Nome Completo</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="first_name" placeholder="First Name" class="form-control" type="text"> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" >Empresa</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="last_name" placeholder="Last Name" class="form-control" type="text"> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label">E-Mail</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> <input name="email" placeholder="E-Mail Address" class="form-control" type="text"> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label">Telefone</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> <input name="phone" placeholder="(00) 0000-0000" class="form-control" type="text"> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label">Celular</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> <input name="address" placeholder="(00) 00000-0000" class="form-control" type="text"> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label">Cidade</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> <input name="city" placeholder="city" class="form-control" type="text"> </div> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label">State</label> <div class="col-md-4 selectContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span> <select name="state" class="form-control selectpicker" > <option value="estado">Por favor, selecione o Estado</option> <option value="ac">Acre</option> <option value="al">Alagoas</option> <option value="am">Amazonas</option> <option value="ap">Amapá</option> <option value="ba">Bahia</option> <option value="ce">Ceará</option> <option value="df">Distrito Federal</option> <option value="es">Espírito Santo</option> <option value="go">Goiás</option> <option value="ma">Maranhão</option> <option value="mt">Mato Grosso</option> <option value="ms">Mato Grosso do Sul</option> <option value="mg">Minas Gerais</option> <option value="pa">Pará</option> <option value="pb">Paraíba</option> <option value="pr">Paraná</option> <option value="pe">Pernambuco</option> <option value="pi">Piauí</option> <option value="rj">Rio de Janeiro</option> <option value="rn">Rio Grande do Norte</option> <option value="ro">Rondônia</option> <option value="rs">Rio Grande do Sul</option> <option value="rr">Roraima</option> <option value="sc">Santa Catarina</option> <option value="se">Sergipe</option> <option value="sp">São Paulo</option> <option value="to">Tocantins</option> </select> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label">Cep</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> <input name="zip" placeholder="00000-00" class="form-control" type="text"> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label">Website or domain name</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span> <input name="website" placeholder="Website or domain name" class="form-control" type="text"> </div> </div> </div> <!-- radio checks --> <div class="form-group"> <label class="col-md-4 control-label">Como prefere ser contatado?</label> <div class="col-md-4"> <div class="radio"> <label> <input type="radio" name="hosting" value="yes" /> Telefone </label> </div> <div class="radio"> <label> <input type="radio" name="hosting" value="no" /> Celular </label> </div> <div class="radio"> <label> <input type="radio" name="hosting" value="no" /> E-mail </label> </div> </div> </div> <!-- Text area --> <div class="form-group"> <label class="col-md-4 control-label">Mensagem</label> <div class="col-md-4 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span> <textarea class="form-control" name="comment" placeholder="Project Description"></textarea> </div> </div> </div> <!-- Success message --> <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label"></label> <div class="col-md-4"> <button type="submit" class="btn btn-warning" >Enviar <span class="glyphicon glyphicon-send"></span></button> </div> </div> </fieldset> </form> </div> </div><!-- /.container -->
#success_message{ display: none;}
$(document).ready(function() { $('#contact_form').bootstrapValidator({ // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { first_name: { validators: { stringLength: { min: 2, }, notEmpty: { message: 'Please supply your first name' } } }, last_name: { validators: { stringLength: { min: 2, }, notEmpty: { message: 'Please supply your last name' } } }, email: { validators: { notEmpty: { message: 'Please supply your email address' }, emailAddress: { message: 'Please supply a valid email address' } } }, phone: { validators: { notEmpty: { message: 'Please supply your phone number' }, phone: { country: 'US', message: 'Please supply a vaild phone number with area code' } } }, address: { validators: { stringLength: { min: 8, }, notEmpty: { message: 'Please supply your street address' } } }, city: { validators: { stringLength: { min: 4, }, notEmpty: { message: 'Please supply your city' } } }, state: { validators: { notEmpty: { message: 'Please select your state' } } }, zip: { validators: { notEmpty: { message: 'Please supply your zip code' }, zipCode: { country: 'US', message: 'Please supply a vaild zip code' } } }, comment: { validators: { stringLength: { min: 10, max: 200, message:'Please enter at least 10 characters and no more than 200' }, notEmpty: { message: 'Please supply a description of your project' } } } } }) .on('success.form.bv', function(e) { $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ... $('#contact_form').data('bootstrapValidator').resetForm(); // Prevent form submission e.preventDefault(); // Get the form instance var $form = $(e.target); // Get the BootstrapValidator instance var bv = $form.data('bootstrapValidator'); // Use Ajax to submit form data $.post($form.attr('action'), $form.serialize(), function(result) { console.log(result); }, 'json'); }); });

Related: See More


Questions / Comments: