How to validate one of the 2 fields as required with bootstrap-Validator?

Question

I need one of the 2 fields to be filled (mandatory). I am using "bootstrap-Validator": " 0.11.9",

I tried to do with the custom according to the example code, only that I would need to inform for the 2 fields that is ok or false for the 2 fields, I do not know if this is the best way to do for this library.

$(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;
                }
            },
        },
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.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">
            <form name="sentMessage" id="contactForm" class="form-horizontal" role="form" novalidate data-toggle="validator">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="control-group form-group">
                            <label for="telefone" class="col-sm-4 control-label">* Telefone</label>
                            <div class="col-sm-8">
                                <input type="tel" class="form-control telefone" id="telefone" required data-required-error="Preencha este campo ou o celular." data-telefone="celular">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="control-group form-group">
                            <label for="celular" class="col-sm-4 control-label">* Celular</label>
                            <div class="col-sm-8">
                                <input type="tel" class="form-control telefone" id="celular" required data-required-error="Preencha este campo ou o telefone." data-telefone="telefone">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="control-group form-group">
                    <div class="col-sm-3 col-sm-offset-5">
                        <button type="submit" class="btn btn-info btn-block"><b>Enviar</b></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- /.row -->

</div>
<!-- /.Page Content -->

or

Example: https://jsfiddle.net/Felipebros/vjzx08o1/16

Answer 1

I got by doing it this way, I don’t know if it’s a gambiarra.

$(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;
                }
            }
        }
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.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">
            <form name="sentMessage" id="sentMessage" class="form-horizontal" role="form" novalidate data-toggle="validator">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="control-group form-group has-feedback">
                            <label for="telefone" class="col-sm-4 control-label">* Telefone</label>
                            <div class="col-sm-8">
                                <input type="tel" class="form-control telefone" id="telefone" required data-required-error="Preencha o telefone ou o celular." data-telefone="celular">
                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="control-group form-group has-feedback">
                            <label for="celular" class="col-sm-4 control-label">* Celular</label>
                            <div class="col-sm-8">
                                <input type="tel" class="form-control celular" id="celular" required data-required-error="Preencha o telefone ou o celular." data-telefone="telefone">
                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="control-group form-group">
                    <div class="col-sm-3 col-sm-offset-5">
                        <button type="submit" class="btn btn-info btn-block"><b>Enviar</b></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- /.row -->

</div>
<!-- /.Page Content -->

Answer 2

could do a simple javascript check, forcing the field to be filled.

Function valida(){ var field = Document.getElementById("name"); if(field.value == ""){ Alert("Field not filled!"); Return false; } Return true; }

And in your form tag

form action="" method="post" onsubmit="return valida()"

Of A Look Here