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="contactForm" class="form-horizontal" role="form" novalidate data-toggle="validator">
                <div class="control-group form-group">
                    <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>
                        <div class="help-block with-errors"></div>
                    </div>
                </div>
                <div class="control-group form-group">
                    <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.">
                        <div class="help-block with-errors"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="control-group form-group">
                            <label...

JavaScript

$(document).ready(function () {
    $("#sentMessage").validator({
        feedback: {
            success: 'glyphicon-ok',
            error: 'glyphicon-remove'
        },
        delay: 500,
        custom: {
            telefone: function ($el) {
                var campo_comparar = $el.data("telefone");
                console.log("el val [" + $el.val() + "]");
                console.log("campo comparar val [" + $('#' + campo_comparar).val() + "]");
                if ($el.val() == "" && $('#' + campo_comparar).val() == "") {
                    console.log("Preencha o telefone ou o celular");
                    return true;
                } else {
                    console.log("Tudo ok");
                    return false;
                }
            },
            /* equals: function ($el) {
                var matchValue = $el.data("equals"); // foo
                if ($el.val() !== matchValue) {
                    return "Hey, that's not valid! It's gotta be " + matchValue;
                }
            } */
        },
    });
});