Bootstrap Form Validation

by Felipe Soares Barbosa Silveira

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<!-- Page Content -->
<div class="container">

    <!-- Contact Form -->
    <!-- In order to set the email address and subject line for the contact form go to the bin/contact_me.php file. -->
    <div class="row">
        <div class="col-md-8">
            <h2 class="titulo-pagina">Dê um passo importante para os resultados do seu negócio!</h2>
            <!-- <h3>Dê um passo importante para os resultados do seu negócio!</h3> -->
            <form name="sentMessage" id="sentMessage" class="form-horizontal" role="form" novalidate data-toggle="validator">
                <div class="control-group form-group has-feedback">
                    <label for="nome" class="col-sm-2 control-label">* Nome</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="nome" required>
                        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                        <div class="help-block with-errors"></div>
                    </div>
                </div>
                <div class="control-group form-group has-feedback">
                    <label for="email" class="col-sm-2 control-label">* E-mail Empresarial</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="email" required data-required-error="Preencha este campo." data-error="E-mail inválido.">
                        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                        <div class="help-block with-errors"></div>
           ...

JavaScript

$(document).ready(function () {
    $('#sentMessage').validator({
        custom: {
            telefone: function ($el) {
                var campo_comparar = $el.data('telefone');
                if ($el.val().trim() == '') {
                    if ($('#' + campo_comparar).attr('required') == undefined) {
                        $('#' + campo_comparar).prop('required', 'required');
                        this.validateInput($('#' + campo_comparar));
                    }
                    if ($el.val().trim() == '' && $('#' + campo_comparar).val().trim() == '') {
                        return $el.attr('data-required-error');
                    }
                    return false;
                } else {
                    if ($el.attr('required') == 'required' && $('#' + campo_comparar).attr('required') == 'required') {
                        $('#' + campo_comparar).prop('required', false);
                        this.validateInput($('#' + campo_comparar));
                    }
                    return false;
                }
            }
        }
    });
});