Remove From My Forums

How to use CustomValidator on ModalPopupExtender

Question

User-1063667917 posted

Hi,

I am using a ModalPopupExtender, in this modal the user saves an email, but I need to validate that the email does not exists to avoid duplicates.

I can't allow the page to postback because the modal will hide, so I need a sample to do it async.

I've seen lots of samples of CustomValidator but not on a ModalPopupExtender or not checking database.

So far I have done this but it's not working:

AJAX:

function validateEmail(oSrc, args) {
        var isValid;
        if (args.Value == '' || args.Value == undefined || $('#<%= txtRFCc.ClientID%>').val() == '') {
                // prevent from calling webservice when unnecessary
                isValid = true;
                args.IsValid = true;
        }
        else {
                $.ajax({
                        type: "POST",
                        url: "invoice33.aspx/IsUserAvailable",
                        contentType: "application/json; charset=utf-8",
                        data: "{ 'username':  '" + args.Value + "'," + $('#<%= IdC.ClientID%>').val() + "}",
                        dataType: "json",
                        async: false,
                        success: function (msg) {
                                isValid = msg.d;
                        }
                        //, error: function () { }
                });
        }
        args.IsValid = isValid;
        console.log('args.IsValid: ' + args.IsValid);
        console.log('isValid: ' + isValid);
}

ASP:

<asp:CustomValidator ClientValidationFunction="validateEmail" runat="server" ID="rfcc" ForeColor="Red" Font-Bold="true" ErrorMessage="Already exists" ControlToValidate="txtRFCc" Display="Dynamic" ValidationGroup="nSave" />

Code behind:

 <WebMethod()> _
    Public Shared Function IsUserAvailable(ByVal username As String, ide As Int32) As Boolean
        Dim sls As New Intra.Clients
        If sls.ClientExists(ide, username) Then
            Return True
        Else
            Return False
        End If
    End Function

Any hint?

Thanks in advance

Tuesday, July 25, 2017 5:13 PM

Answers

User-707554951 posted

Hi GeorgeClass,

Simple working example as below :

 <style type="text/css">
        .modalBackground {
            background-color: Black;
            filter: alpha(opacity=90);
            opacity: 0.8;
        }

        .modalPopup {
            background-color: #FFFFFF;
            border-width: 3px;
            border-style: solid;
            border-color: black;
            padding-top: 10px;
            padding-left: 10px;
            width: 300px;
            height: 140px;
        }
    </style>
 <script>
        function ClientValidate(source, arguments) {
            if (arguments.Value % 2 == 0) {
                arguments.IsValid = true;
            } else {
                arguments.IsValid = false;
            }
        }
    </script>

 <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
            <!-- ModalPopupExtender -->
            <ajaxToolkit:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow"
                CancelControlID="btnClose" BackgroundCssClass="modalBackground">
            </ajaxToolkit:ModalPopupExtender>
            <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
                This is an ASP.Net AJAX ModalPopupExtender Example<br />
                 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
               <asp:Label id="Message"  
           Text="Enter an even number:" 
           Font-Name="Verdana" 
           Font-Size="10pt" 
           runat="server"/>
            <asp:TextBox ID="Text1"
                runat="server" />             
                 <asp:CustomValidator ID="CustomValidator1"
          ControlToValidate="Text1"
          ClientValidationFunction="ClientValidate"     
          Display="Static"
          ErrorMessage="Not an even number!"
          ForeColor="green"
          Font-Name="verdana"
          Font-Size="10pt"
          runat="server" />
                </ContentTemplate>
        </asp:UpdatePanel>
                <asp:Button ID="btnClose" runat="server" Text="Close" />
            </asp:Panel>
            
     
        </div>

Output:

Answered by:

How to use CustomValidator on ModalPopupExtender

Question

Answers