Search code examples
phpjquerybootstrapvalidator

Bootstrap validator plugin error with input type=number

When I load page Bootstrap validator plugin is showing error

Uncaught RangeError: Maximum call stack size exceeded at String.replace ().

When I remove name attribute of the input, there is no error. Same code is working on another page i.e. by using same validator & jquery files. I have extracted only this piece of code but its still showing error.

Here is the code

<html>
    <head>
        <title>title</title>
        <!-- Bootstrap -->
        <link href="http://localhost/my_sites/suzuki/web-reports/plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
        <!-- validator -->
        <link href="http://localhost/my_sites/suzuki/web-reports/plugins/validator/bootstrapValidator.min.css" rel="stylesheet" />
    </head>
    <body>

        <form id="f" action="f.php" method="post" >
          <input type="number" id="b" name="b" value="0" />
          <input type="submit" id="a" name="a" class="btn btn-primary pull-right" value="Save" />
        </form>

        <!-- jQuery --> 
        <!--jQuery v2.2.4--> 
        <script src="http://localhost/my_sites/suzuki/web-reports/plugins/jquery/dist/jquery.min.js"></script> 
        <!-- Bootstrap -->
        <!--Bootstrap v3.3.6-->
        <script src="http://localhost/my_sites/suzuki/web-reports/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
        <!-- validator --> 
        <!--@version     v0.5.3, built on 2014-11-05 9:14:18 PM--> 
        <script src="http://localhost/my_sites/suzuki/web-reports/plugins/validator/bootstrapValidator.min.js"></script>

        <script>
            $(document).ready(function() {
                $('#f').bootstrapValidator();
            });        
        </script>

    </body>
</html>

Here is the error

Uncaught RangeError: Maximum call stack size exceeded at String.replace () at fa (jquery.min.js:2) at Function.fa.matches (jquery.min.js:2) at Function.n.filter (jquery.min.js:2) at z (jquery.min.js:2) at n.fn.init.is (jquery.min.js:2) at b._getMessageContainer (bootstrapValidator.min.js:11) at b._getMessageContainer (bootstrapValidator.min.js:11) at b._getMessageContainer (bootstrapValidator.min.js:11) at b._getMessageContainer (bootstrapValidator.min.js:11)

Solution

  • If your form is NOT structured by Bootstrap classes (the element containing field and associated label does NOT have form-group class), you will see the error. Go through this jsfiddle. you will get a solution 

    [1]: http://jsfiddle.net/Arkni/x7pooh99/