How to create a custom validation in Bootstrap Validation

Question

How to create a custom validation in Bootstrap Validation

42.8k views Asked by Andoy Abarquez At 12 November 2014 at 06:25

My goal is to validate a specific text field where this field is dependent to the value of the other element.

For example I have a select field and an input text field.

Input text is required only when select tag has a selected value.

Hope someone can help.

Original Q&A

There are 4 answers

**mavarazy** · Answer 1 · 2014-11-12 08:15:24

Take a look at

http://bootstrapvalidator.com/

In our project we are using, Backbone validator, integrated with Bootstrap

https://github.com/thedersen/backbone.validation

Sample of integration Backbone.validation & Bootstrap

https://jsfiddle.net/thedersen/c3kK2/

That is if you are using Backbone :)

For bootstrapvalidator there is a callback method for validation

http://bootstrapvalidator.com/validators/callback/

From example:

  <input type="text" class="form-control" name="captcha"
                data-bv-callback="true"
                data-bv-callback-message="Wrong answer"
                data-bv-callback-callback="checkCaptcha" />

And JS

function checkCaptcha(value, validator) {
    // Determine the numbers which are generated in captchaOperation
    var items = $('#captchaOperation').html().split(' '),
        sum   = parseInt(items[0]) + parseInt(items[2]);
   return value == sum;
};

$(document).ready(function() {
    // Return a random number between min and max
    function randomNumber(min, max) {
       return Math.floor(Math.random() * (max - min + 1) + min);
    };

    // Generate a sum of two random numbers
    function generateCaptcha() {
        $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
    };

    generateCaptcha();

    $('#callbackForm').bootstrapValidator();
});

You can implement arbitrary validation with it.

So your validation can be implemented through some global function

With HTML

  <input type="text" class="form-control" name="captcha"
                data-bv-callback="true"
                data-bv-callback-message="Wrong answer"
                data-bv-callback-callback="specialValidation" />

with JS

 function specialValidation(value, validator) {
    // Determine the numbers which are generated in captchaOperation
    var items = $('#otherField').txt();
    return value == sum;
};

And you need to be creative with element attributes, to link related elements correctly.

**inaam husain** · Answer 2 · 2014-11-12 06:36:18

Use this following code, onchange jquery function is used for this.

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>change demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<select name="sweets" multiple="multiple">
  <option>Chocolate</option>
  <option selected="selected">Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div></div>

<script>
$( "select" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .change();
</script>

</body>
</html>

**Srikanth** · Answer 3 · 2014-11-12 06:45:19

Srikanth On 12 November 2014 at 06:45

You can do that.

Before calling Bootstrap validation just add the data-required attribute to your input element if select has selected value otherwise don’t add that attribute.

**BALAJI R** · Answer 4 · 2017-08-23 11:41:01

Use callback for custom validation you can use any validation on callback like JavaScript validation. Need to send false or true.

pwd:
{
    validators:
    {
        notEmpty:
        {
            message: 'The password is required and cannot be empty'
        },
        callback:
        {
            message: 'The password is not valid',
            callback: function(value, validator, $field)
            {
                if (value === '')
                {
                    return true;
                }
            }
        }
    }
}

TechQA.

How to create a custom validation in Bootstrap Validation

There are 4 answers

Related Questions in JQUERY

Related Questions in HTML

Related Questions in SPRING

Related Questions in JQBOOTSTRAPVALIDATION

Popular Questions

Popular Tags

Trending Questions