Validate form using jQuery bootstrapValidator in ASP.Net

ramco1917
 
on Jul 19, 2022 11:18 PM
Sample_202888.zip
358 Views

Hi

In below code it display pop-up message but i want below TextBox it should display error message not popup.

<div class="row">
    <div class="col-md-6 col-12">
        <div class="input-group mb-4">
            <span class="input-group-text"><i class="fas fa-mobile"></i></span>
            <asp:TextBox ID="txtVMobile" class="form-control num" MaxLength="10" minlength="10" runat="server" placeholder="Enter your Mobile Number"></asp:TextBox>
        </div>
    </div>
    <div class="col-md-6 col-12">
        <div class="input-group mb-4">
            <span class="input-group-text">
                <i class="fas fa-map-marker-alt"></i>
            </span>
            <asp:TextBox ID="txtVCity" class="form-control alph" minlength="3" runat="server" placeholder="Enter your City"></asp:TextBox>
        </div>
    </div>
</div>

Trying below code but not working

<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 username is not valid',
                    validators: {
                        notEmpty: {
                            message: 'The username is required and can\'t be empty'
                        },
                        stringLength: {
                            min: 1,
                            max: 30,
                            message: 'The username must be more than 6 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:48 AM

Hi ramco1917,

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