asp.netbootstrap-modalrequiredfieldvalidator

RequiredFieldValidator blocks the bootstrap modal pop up


I have a button

 <button type="button" class="btn btn-primary horizontal-bar" id="btnAdd" runat="server" onserverclick="btnAdd_ServerClick">
            Add
        </button>

which calls the method

  protected void btnAdd_ServerClick(object sender, EventArgs e)
    {
        ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "script", "<script type='text/javascript'>$( document ).ready(function() { $('#GaragesModal').modal('show')});</script>", false);
    }

which should open up the modal

<div class="modal fade" id="GaragesModal">
    <div class="modal-dialog small">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Garages</h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label for="txtName" class="col-sm-2 control-label">Name</label>
                        <div class="col-sm-10">                             
                            <asp:TextBox ID="txtName" runat="server" OnTextChanged="txtName_TextChanged" CssClass="form-control"></asp:TextBox>
                            <asp:RegularExpressionValidator runat="server" ControlToValidate="txtName" ValidationExpression="^[a-zA-Z ]*$" ErrorMessage="Name required" ForeColor="#ff0000" />
                            <asp:RequiredFieldValidator ErrorMessage="errormessage" ControlToValidate="txtName" runat="server" />
                        </div>
                    </div>...(closing tags)

The issue is when I add asp:RequiredFieldValidator to the textbox like shown in the code, the method btnAdd_ServerClick is not fired when clicking the button. asp:RegularExpressionValidator works fine. Any idea why it is and any other way of validating required field. Thank you in advance.


Solution

  • You need to hookup the validators in modal popup with only the button in modal popup and right now the validators are hooked up with Add button also. You can do this by assigning a ValidationGroup for the validators and the button in the modal popup. Don't provide any ValidationGroup for the Add button since it only opens the popup.

    You have not shown a button in modal popup but I am sure you have one. Please set the ValidationGroup of that button to the same value as for the validators.

    Don't give any validation group to Add button and set its CausesValidation property to false.

    <asp:RegularExpressionValidator runat="server" ControlToValidate="txtName"
       ValidationExpression="^[a-zA-Z ]*$" ErrorMessage="Name required"
       ForeColor="#ff0000" ValidationGroup="Save"/>
    <asp:RequiredFieldValidator ErrorMessage="errormessage" 
      ControlToValidate="txtName" runat="server" ValidationGroup="Save"/>