Validate form using BootstrapValidator on Button click using jQuery in ASP.Net

Last Reply on Dec 11, 2017 05:40 AM By dharmendr

Posted on Dec 08, 2017 03:01 AM

Hi,

With reference to below link i want to implement the same validation in asp.net master pages content page.

http://www.aspforums.net/Threads/194703/Bootstrap-validation-for-Registration-Form-using-jQuery-BootstrapValidator-plugin-in-ASPNet-MVC/

I have few textboxes and 4 buttons Add,Update,Delete,Clear for crud.

I want to make validation in content page of the master page.

With above mentioned link they referred form name in script function 

<form class="form-horizontal" action=" " method="post"  id="reg_form">

But in child pages of Master Page there is no form tag to refer in script function.

So i am unable validate my child form controls.

Also i have 4 buttons Save,Update,Delete

So i want to fire validation script on every button.

Posted on Dec 11, 2017 05:40 AM Modified on on Dec 13, 2017 01:13 AM

Hi Waghmare,

You need to comment the form tag that is in the master page and need to add form tag in the content page.

Check this example. Now please take its reference and correct your code.

You can use the form tag in master page and comment the form tag in the contentpage and place the controls inside a div and assign the same id to the div.

Master Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <%--<form id="form1" runat="server">--%>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    <%--</form>--%>
</body>
</html>

Content Page

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script type="text/javascript" src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
    <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 () {
            $('[id*=btnSave],[id*=btnUpdate],[id*=btnDelete]').on("click", function () {
                var validator = $('[id*=reg_form]').data('bootstrapValidator');
                validator.validate();
                return validator.isValid();
            });
            ValidateForm();
        });
        function ValidateForm() {
            $('[id*=reg_form]').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    first_name: {
                        validators: {
                            stringLength: {
                                min: 2
                            },
                            notEmpty: {
                                message: 'Please supply your first name'
                            }
                        }
                    },
                    last_name: {
                        validators: {
                            stringLength: {
                                min: 2
                            },
                            notEmpty: {
                                message: 'Please supply your last name'
                            }
                        }
                    },
                    phone: {
                        validators: {
                            notEmpty: {
                                message: 'Please supply your phone number'
                            },
                            phone: {
                                country: 'US',
                                message: 'Please supply a vaild phone number with area code'
                            }
                        }
                    },
                    address: {
                        validators: {
                            stringLength: {
                                min: 8
                            },
                            notEmpty: {
                                message: 'Please supply your street address'
                            }
                        }
                    },
                    city: {
                        validators: {
                            stringLength: {
                                min: 4
                            },
                            notEmpty: {
                                message: 'Please supply your city'
                            }
                        }
                    },
                    state: {
                        validators: {
                            notEmpty: {
                                message: 'Please select your state'
                            }
                        }
                    },
                    zip: {
                        validators: {
                            notEmpty: {
                                message: 'Please supply your zip code'
                            },
                            zipCode: {
                                country: 'US',
                                message: 'Please supply a vaild zip code'
                            }
                        }
                    },
                    comment: {
                        validators: {
                            stringLength: {
                                min: 10,
                                max: 200,
                                message: 'Please enter at least 10 characters and no more than 200'
                            },
                            notEmpty: {
                                message: 'Please supply a description about yourself'
                            }
                        }
                    },
                    email: {
                        validators: {
                            notEmpty: {
                                message: 'Please supply your email address'
                            },
                            emailAddress: {
                                message: 'Please supply a valid email address'
                            }
                        }
                    },

                    password: {
                        validators: {
                            identical: {
                                field: 'confirmPassword',
                                message: 'Confirm your password below - type same password please'
                            }
                        }
                    },
                    confirmPassword: {
                        validators: {
                            identical: {
                                field: 'password',
                                message: 'The password and its confirm are not the same'
                            }
                        }
                    }
                }
            });
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <form runat="server" class="form-horizontal" id="reg_form">
    <fieldset>
        <!-- Form Name -->
        <legend>Personal Information </legend>
        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label">
                First Name</label>
            <div class="col-md-6  inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    <input name="first_name" placeholder="First Name" class="form-control" type="text" />
                </div>
            </div>
        </div>
        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label">
                Last Name</label>
            <div class="col-md-6  inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    <input name="last_name" placeholder="Last Name" class="form-control" type="text" />
                </div>
            </div>
        </div>
        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label">
                Phone #</label>
            <div class="col-md-6  inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                    <input name="phone" placeholder="(845)555-1212" class="form-control" type="text" />
                </div>
            </div>
        </div>
        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label">
                Address</label>
            <div class="col-md-6  inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                    <input name="address" placeholder="Address" class="form-control" type="text" />
                </div>
            </div>
        </div>
        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label">
                City</label>
            <div class="col-md-6  inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                    <input name="city" placeholder="city" class="form-control" type="text" />
                </div>
            </div>
        </div>
        <!-- Select Basic -->
        <div class="form-group">
            <label class="col-md-4 control-label">
                State</label>
            <div class="col-md-6 selectContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
                    <select name="state" class="form-control selectpicker">
                        <option value=" ">Please select your state</option>
                        <option>Alabama</option>
                        <option>Alaska</option>
                        <option>Arizona</option>
                        <option>Arkansas</option>
                    </select>
                </div>
            </div>
        </div>
        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label">
                Zip Code</label>
            <div class="col-md-6  inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                    <input name="zip" placeholder="Zip Code" class="form-control" type="text" />
                </div>
            </div>
        </div>
        <!-- Text area -->
        <div class="form-group">
            <label class="col-md-4 control-label">
                About
            </label>
            <div class="col-md-6  inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                    <textarea class="form-control" name="comment" placeholder="About "></textarea>
                </div>
            </div>
        </div>
    </fieldset>
    <legend>Account information </legend>
    <fieldset>
        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label">
                E-Mail</label>
            <div class="col-md-6  inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                    <input name="email" placeholder="E-Mail Address" class="form-control" type="text" />
                </div>
            </div>
        </div>
        <div class="form-group has-feedback">
            <label for="password" class="col-md-4 control-label">
                Password
            </label>
            <div class="col-md-6  inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                    <input class="form-control" id="userPw" type="password" placeholder="password" name="password"
                        data-minlength="5" data-error="some error" required />
                    <span class="glyphicon form-control-feedback"></span><span class="help-block with-errors">
                    </span>
                </div>
            </div>
        </div>
        <div class="form-group has-feedback">
            <label for="confirmPassword" class="col-md-4 control-label">
                Confirm Password
            </label>
            <div class="col-md-6  inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                    <input class="form-control {$borderColor}" id="userPw2" type="password" placeholder="Confirm password"
                        name="confirmPassword" data-match="#confirmPassword" data-minlength="5" data-match-error="some error 2"
                        required />
                    <span class="glyphicon form-control-feedback"></span><span class="help-block with-errors">
                    </span>
                </div>
            </div>
        </div>
        <!-- Button -->
        <div class="form-group">
            <div class="col-md-offset-2 col-lg-offset-2 col-md-2 col-lg-2 " style="margin-bottom: 12px"
                runat="server" id="divSave">
                <asp:LinkButton ID="btnSave" runat="server" CssClass="btn btn-success btn-block btn-md"
                    OnClick="btnSave_Click"><span class="fa fa-download" ></span>&nbsp;Save</asp:LinkButton>
            </div>
            <div class="col-md-2 col-lg-2 " style="margin-bottom: 12px" runat="server" id="divUpdate">
                <asp:LinkButton ID="btnUpdate" runat="server" CssClass="btn btn-warning btn-block btn-md"
                    OnClick="btnUpdate_Click" ValidationGroup="First"><span class="fa fa-pencil"></span>&nbsp;Update</asp:LinkButton>
            </div>
            <div class="col-md-2 col-lg-2 " style="margin-bottom: 12px" runat="server" id="divDelete">
                <asp:LinkButton ID="btnDelete" runat="server" CssClass="btn btn-danger btn-block btn-md"
                    OnClick="btnDelete_Click" ValidationGroup="First"><span class="fa fa-bitbucket"></span>&nbsp;Delete</asp:LinkButton>
            </div>
            <div class="col-md-2 col-lg-2 ">
                <asp:LinkButton ID="btnClear" runat="server" CssClass="btn btn-default btn-block btn-md"
                    OnClick="btnClear_Click"><span class="fa fa-repeat"></span>&nbsp;Clear</asp:LinkButton>
            </div>
        </div>
    </fieldset>
    </form>
</asp:Content>

C#

protected void btnSave_Click(object sender, EventArgs e)
{
    // Get filled details.
    string first_name = Request.Form["first_name"];
    string last_name = Request.Form["last_name"];
    string phone = Request.Form["phone"];
    string address = Request.Form["address"];
    string city = Request.Form["city"];
    string state = Request.Form["state"];
    string zip = Request.Form["zip"];
    string comment = Request.Form["comment"];
    string email = Request.Form["email"];
    string password = Request.Form["password"];
}
protected void btnUpdate_Click(object sender, EventArgs e)
{

}
protected void btnDelete_Click(object sender, EventArgs e)
{

}
protected void btnClear_Click(object sender, EventArgs e)
{

}

VB.Net

Protected Sub btnSave_Click(sender As Object, e As System.EventArgs)
    ' Get filled details.
    Dim first_name As String = Request.Form("first_name")
    Dim last_name As String = Request.Form("last_name")
    Dim phone As String = Request.Form("phone")
    Dim address As String = Request.Form("address")
    Dim city As String = Request.Form("city")
    Dim state As String = Request.Form("state")
    Dim zip As String = Request.Form("zip")
    Dim comment As String = Request.Form("comment")
    Dim email As String = Request.Form("email")
    Dim password As String = Request.Form("password")
End Sub

Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As EventArgs)

End Sub

Protected Sub btnDelete_Click(ByVal sender As Object, ByVal e As EventArgs)

End Sub

Protected Sub btnClear_Click(ByVal sender As Object, ByVal e As EventArgs)

End Sub