RequiredFieldValidator to prompt ModalPopupExtender

Question

I have a bunch of RequiredFieldValidators on a page and I would like the ErrorMessage="" to display in a ModalPopupExtender rather than on the page. So when they click submit and a textbox isn't filled out, a ModalPopupExtender would come up on the screen and say "Text Box is Required" rather than on the page where the RequiredFieldValidator is placed.

Here is an example of my code (posting my whole page would be far too large):

<form id="form1" runat="server">
<div class="container">
<div class="row">
        <div class="span3">
            <div class="control-group">
                <asp:Label ID="NameLbl" class="control-label required" runat="server" Text="Name"></asp:Label>
                <div class="controls">
                    <asp:TextBox ID="NameTxtBox" class="span3" runat="server"></asp:TextBox><span
                        class="help-block"><asp:RequiredFieldValidator ID="NameRFV" class="RFV" runat="server"
                            ErrorMessage="Name is Required" ControlToValidate="NameTxtBox"></asp:RequiredFieldValidator></span>
                </div>
            </div>
        </div>
         <div class="span3">
            <div class="control-group">
                <asp:Label ID="Email" class="control-label required" runat="server" Text="Email"></asp:Label>
                <div class="controls">
                    <asp:TextBox ID="EmailTxtBox" class="span3" runat="server"></asp:TextBox><span
                        class="help-block"><asp:RequiredFieldValidator ID="EmailRFV" class="RFV" runat="server"
                            ErrorMessage="Required" ControlToValidate="EmailTxtBox"></asp:RequiredFieldValidator></span>
                </div>
            </div>
        </div>
      </div>
     <asp:Button ID="Button1" class="btn btn-primary" runat="server" Text="Submit"
                OnClick="Submit_Click" />
     </div>
    </form>

    <asp:scriptmanager id="ScriptManager1" runat="server">
            </asp:scriptmanager><asp:ModalPopupExtender ID="ModalPopupExtender1" cancelcontrolid="btnCancel"
targetcontrolid="Button1" popupcontrolid="SavePopup" 
backgroundcssclass="ModalPopupBG" runat="server">
            </asp:ModalPopupExtender>
            <asp:panel id="SavePopup" style="display: none" runat="server">
            <div class="ModalPopup">
            <h4>Fields Missing!</h4>
                <p>Name is Required, Email is Required.</p>
                <input id="btnCancel" type="button" value="Close" /></div>
         </asp:panel>

Here is a mockup of how I want it when the user hits the Submit button they should see a modelpopup like this saying which fields are empty.

Any ideas on how to accomplish this? Do I keep the requiredfieldvalidators inside the modalpopupextender but then how to do I determine if the modalpopupextender gets activated, I don't want it coming up if all the fields have text within them.

Answer 1

I discovered the ValidationSummary tool and used this to get a pop-up on submit:

<asp:ValidationSummary ID="ValidationSummary1" HeaderText="You're missing a required field:" EnableClientScript="true" ShowMessageBox="true" ShowSummary="false" runat="server" />

The ShowMessageBox = "true" is what gave me the pop-up box.

Answer 2

You can use something like this;

<script type = "text/javascript"> function isPageValid() {
  var validated = Page_ClientValidate('YourGroupName');
  if (validated) {
    var mdlPopup = $find('myModalPopup');
    if (mdlPopup) {
      mdlPopup.show();
      return false;
    }
  }
} </script>