JavaScript Bootstrap validation

Question

I am using JavaScript and Bootstrap for validation in my form. Everything works the way it should when I make all of these 4 fields required.

However, I need an either/or situation. For example, if the first two fields, 'name' and 'SIN' are filled, then 'BusinessName' and 'BusinessID' are not required and vice versa. Here is the current code:

<div class="form-group">
    <label class="col-lg-3 control-label">Name</label>
    <div class="col-lg-5">
        <input type="text" required class="form-control" name="name" />
    </div>
</div>

<div class="form-group">
    <label class="col-lg-3 control-label">SIN #</label>
    <div class="col-lg-5">
        <input type="text" class="form-control" name="SIN" />
    </div>
</div>

<div class="form-group">
    <label class="col-lg-3 control-label">Business Name</label>
    <div class="col-lg-5">
        <input type="text" class="form-control" name="BusinessName" />
    </div>
</div>

<div class="form-group">
    <label class="col-lg-3 control-label">Business #</label>
    <div class="col-lg-5">
        <input type="text" class="form-control" name="Businessid" />
    </div>
</div>  

<script type="text/javascript">
$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
        message: 'This value is not valid',

        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: 'The Name is required and cannot be empty'
                    },

                    regexp: {
                        regexp: /^[a-zA-Z-\.\ ]+$/,
                        message: 'The Name can only consist of Alphabets, Space and Hyphens'
                    }
                }
            },


            SIN: {
                validators: {
                    notEmpty: {
                        message: 'The SIN is required and cannot be empty'
                    },

                    regexp: {
                        regexp: /^[0-9\ ]+$/,
                        message: 'The SIN can only consist of Numbers and Space'
                    }
                }
            },


            BusinessName: {
                validators: {
                    notEmpty: {
                        message: 'The Business name is required and cannot be empty'
                    }
                }

            },


            Businessid: {
                validators: {
                    notEmpty: {
                        message: 'The Business# is required and cannot be empty'
                    },

                    regexp: {
                        regexp: /^[0-9]+$/,
                        message: 'The Business# can only consist of Numbers'
                    }
                }
            },
des1: {

}


        }
    }) .on('success.form.bv', function(e) {

        });
});
</script>

score 0 · Answer 1 · answered Nov 05 '14 at 21:57

0

It could be:

fields: function(){

    if(your evaluator here){

        return name: {etc}

    }
    else{

        return BusinessName: {etc}

    }

}

answered Nov 05 '14 at 21:57

I'm not sure if that would work because in this case, "fields" should being called as "fields()" and maybe bootsrap validator just call "fields". – Nov 05 '14 at 22:00
Thanks for the reply bb.dd, I get an error when I try this: `fields: function(){ if (typeof name != 'undefined' && name != null ){ return name: {....validation` It says there is an error on the return line. Anything I am missing? – dkeeper09 Nov 06 '14 at 00:53
I will answer that: it should be if($.trim($("input[name='name']").val()) == ""){return bussinessName...}else{return name...} – Nov 06 '14 at 02:03
Still getting the same error when I add that if statement in. What else could be causing it? I only get a syntax error on the first return line. – dkeeper09 Nov 06 '14 at 03:28
Review carefully the syntax, copy/paste the second return line and made the required asjustments. Syntax error are the easiest to tackle. Yet, be aware that this solution could not achieve what you want. – Nov 06 '14 at 16:55

score 0 · Answer 2 · answered Nov 30 '15 at 17:29

Here is my solution http://jsfiddle.net/silviagreen/4jcdnn14/

.on('change', '[name="isPerson"]', function () {

    var bootstrapValidator = $('#form_signup').data('bootstrapValidator'),
        isPerson = ($(this).val() == 'true');

    if (isPerson) {
        $('.persona').find('.form-control').removeAttr('disabled');
        $('.azienda').find('.form-control').attr('disabled', 'disabled');


        bootstrapValidator.enableFieldValidators('luogo_di_nascita', true)
            .enableFieldValidators('data_di_nascita', true)
            .enableFieldValidators('cf', true)
            .enableFieldValidators('sede', false)
            .enableFieldValidators('ragione_sociale', false);

        bootstrapValidator.revalidateField('luogo_di_nascita')
            .revalidateField('data_di_nascita')
            .revalidateField('cf');

    } else {
        $('.azienda').find('.form-control').removeAttr('disabled');
        $('.persona').find('.form-control').attr('disabled', 'disabled');

        bootstrapValidator.enableFieldValidators('luogo_di_nascita', false)
            .enableFieldValidators('data_di_nascita', false)
            .enableFieldValidators('cf', false)
            .enableFieldValidators('sede', true)
            .enableFieldValidators('ragione_sociale', true);

        bootstrapValidator.revalidateField('sede')
            .revalidateField('ragione_sociale');

    }






    })

According to the value of "isPerson", only a part of the field is validated.

JavaScript Bootstrap validation

2 Answers2