[Solved] Uncaught TypeError: $(...).bootstrapValidator is not a function

ramco1917
 
on Jul 20, 2022 04:13 AM
Sample_509917.zip
491 Views

Hi

I am getting error

Uncaught TypeError: $(...).bootstrapValidator is not a function at HTMLDocument.<anonymous> (Index:856:25)

<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#form1').bootstrapValidator({
            message: 'This value is not valid',
            fields: {
                txtVName: {
                    message: 'The ShortName is not valid',
                    validators: {
                        notEmpty: {
                            message: 'The ShortName is required and can\'t be empty'
                        },
                        stringLength: {
                            min: 3,
                            max: 50,
                            message: 'The ShortName must be more than 5 characters long'
                        }
                    }
                },
                txtVCity: {
                    message: 'The city is not valid',
                    validators: {
                        notEmpty: {
                            message: 'City is required and can\'t be empty'
                        },
                        stringLength: {
                            min: 1,
                            max: 30,
                            message: 'The city must be more than 1 and less than 30 characters long'
                        }
                    }
                }
            }
        });
    });
</script>

Thanks

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 20, 2022 04:21 AM

Hi ramco1917,

You might be missing jQuery library.

Check the below example.

HTML

<form id="form1" runat="server">
    <div class="container">
        <div class="row">
            <div class="form-group">
                <label class="col-md-4 control-label">Name</label>
                <div class="col-md-8">
                    <asp:TextBox runat="server" ID="txtVName" CssClass="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">City</label>
                <div class="col-md-8">
                    <asp:TextBox runat="server" ID="txtVCity" CssClass="form-control" />
                </div>
            </div>
        </div>
        <asp:Button Text="Submit" runat="server" />
    </div>
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#form1').bootstrapValidator({
            message: 'This value is not valid',
            fields: {
                txtVName: {
                    message: 'The ShortName is not valid',
                    validators: {
                        notEmpty: {
                            message: 'The ShortName is required and can\'t be empty'
                        },
                        stringLength: {
                            min: 3,
                            max: 50,
                            message: 'The ShortName must be more than 3 characters long'
                        }
                    }
                },
                txtVCity: {
                    message: 'The city is not valid',
                    validators: {
                        notEmpty: {
                            message: 'City is required and can\'t be empty'
                        },
                        stringLength: {
                            min: 1,
                            max: 30,
                            message: 'The city must be more than 1 and less than 30 characters long'
                        }
                    }
                }
            }
        });
    });
</script>

Screenshot