enable and disable field validation using bootstrapValidator

Question

So I tried to check couple of solutions online but I couldn't find a solution that solve my problem regarding enabling and disabling field validation using bootstrapvalidator.

I have a field that supposed to give error when someone enter a negative number (e.g -4,-100,-545 etc.), and any number that is not numeric (e.g 4.4.4, 4.r, 4t etc). But I want to put a condition that wont give error when a user type in -999.

Code is working well when a user enter other number that is not a negative and nob-numeric. And if a user enters negative or non-numeric number, error is displayed. The problem when user enters -999 it validate true(don't show error), but if user change number(-999) to other number such as negative number and nun-numeric number, my field validation stop working (meaning don't show any error though it was supposed to show).

So how can I enable and disable field validation or setting up a condition on field validation to solve my problem using bootstrapValidator..???

Hope you guys have already come across with such a problem and I hope you can help me solve the puzzle.

You can try it here: https://jsfiddle.net/os3b0dqx/ to see how it works

My template.html looks like:

<form class="well form-horizontal" action=" " method="post" id="myform">
    <div class="form-group">
        <label class="col-xs-3 control-label">Length</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" id="length" name="length" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-1">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form>
<script>
    $(document).ready(function() {
        $('#myform').bootstrapValidator({
            feedbackIcons: {
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                length: {
                    validators: {
                        greaterThan: {
                            value: 0,
                            message: 'The value must be greater than or equal to zero'
                        },
                        numeric: {
                            message: 'The value is not a number',
                            thousandsSeparator: '',
                            decimalSeparator: '.'
                        },
                        notEmpty: {
                            message: 'Please fill the length'
                        }
                    }
                },
            }
        }).on('click keyup input change', '[name="length"]', function() {
            if ($(this).val() == -999) {
                $('#myform').bootstrapValidator('enableFieldValidators', 'length', false);
            } else {
                $('#myform').bootstrapValidator('validateField', 'length');
                //$('#myform').bootstrapValidator('enableFieldValidators','length',true);
                // both "validateField" and "enableFieldValidators" doesn't work for me..
            }
        });
    });

R.Costa · Answer 1 · 2017-02-08T17:26:33.903

Remove your event listeners and replace your first two rules with a regular expression that allows only positive numbers and your specific value :

$('#myform').bootstrapValidator({
  fields: {
    length: {
      validators: {
        regexp: {
          regexp: '^[+]?[0-9]+([.,][0-9]+){0,1}$|^-999$',
          message: 'The value must be a number greater than or equal to zero'
        },
        notEmpty: {
          message: 'Please fill the length'
        }
      }
    },
  }
});

enable and disable field validation using bootstrapValidator

1 Answers1