locked
Call WebService after Form Validation Ajax RRS feed

  • Question

  • User256094225 posted

    I have this form validation that checks the input of my textboxes in my page. Once the validation is complete, I want to proceed to a WebMethod. However, I'm not sure how to place the code properly in the javascript.

           <script type="text/javascript">
    
                function validateForm() {
                    var usename = document.getElementById('<%= username1.ClientID %>').value;
                    if (usename == "") {
                        document.querySelector('.status').innerHTML = "Username cannot be empty";
                        return false;
                    }
                    var email = document.getElementById('<%= email1.ClientID %>').value;
                    if (email == "") {
                        document.querySelector('.status').innerHTML = "Email cannot be empty";
                        return false;
                    } else {
                        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                        if (!re.test(email)) {
                            document.querySelector('.status').innerHTML = "Email format invalid";
                            return false;
                        }
                    }
    
    
                        $.ajax({
                            type: "POST",
                            url: "WebService.asmx/Insert",
                            data: '{UserName: "' + username + '", Email: "' + email + '" }',
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (data) {
                                alert("Updated!");
                                function (response) {
                                    alert(response.d);
                                    windows.location.href = "./Page.aspx";
                                }
                            }
                        });
                }
            </script>

    If I wrote it that way, nothing happens. However, the WebMethod alone works and the validation form alone works too.

    Tuesday, December 15, 2020 9:46 PM

All replies

  • User1535942433 posted

    Hi amir1507,

    Accroding to your description and codes,as far as I think,you could manually set the execution order.Just like this:

    <script src="Scripts/jquery-3.5.1.min.js"></script> 
    <script> $(function () { validateForm(); GetResult(); }) function validateForm() { var usename = document.getElementById('<%= username1.ClientID %>').value; if (usename == "") { document.querySelector('.status').innerHTML = "Username cannot be empty"; return false; } var email = document.getElementById('<%= email1.ClientID %>').value; if (email == "") { document.querySelector('.status').innerHTML = "Email cannot be empty"; return false; } else { var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (!re.test(email)) { document.querySelector('.status').innerHTML = "Email format invalid"; return false; } } function GetResult() { $.ajax({ type: "POST", url: "WebService.asmx/Insert", data: '{UserName: "' + username + '", Email: "' + email + '" }', contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { alert("Updated!"); function (response) { alert(response.d); windows.location.href = "./Page.aspx"; } } }); } </script>

    Best regards,

    Yijing Sun

    Wednesday, December 16, 2020 8:38 AM
  • User256094225 posted

    I did exactly as what you mentioned. The function is called on button client click

    <button name="btntr" id="btntr" class="btn" onclick="SubmitFn();"></button>
                $(function SubmitFn() {
                    validateForm();
                    GetResult();
                })

    What happens is that the page reloads and does nothing.

    The button click normally works on each function alone.

    Wednesday, December 16, 2020 8:57 AM
  • User256094225 posted

    ?

    Thursday, December 17, 2020 9:24 AM
  • User1535942433 posted

    Hi amir1507,

    What happens is that the page reloads and does nothing.

    The button click normally works on each function alone.

    Accroding to your description,I don't understand your requirment clearly.I'm guessing that you want to call webservice after the form validation is right.

    If you need to do this,I suggest you could use validate().And if the validation is  true,you could use submitHandler to call webservice. Just like this:

     <script src="Scripts/jquery-3.5.1.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#form1').validate({ 
                    rules: {
                        field1: {
                            required: true,
                        }
                    },
                    submitHandler: function () {
                        GetResult();
                    }
                });
    
            });
            function GetResult() {
                $.ajax({
                    type: "POST",
                    url: "2161734.aspx/getresult",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        alert(data.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            }
        </script>
    <form id="form1" runat="server">
            <div>
                <asp:Label ID="lblPhone" runat="server" Text="Phone number"></asp:Label>
                <input type="text" name="field1" />
                <button name="btntr" id="btntr" class="btn"></button>
    
            </div>
        </form>

    Webservice:

    [System.Web.Services.WebMethod]
            public static string GetResult()
            {
                return "afdsf";
            }

    Best regards,

    Yijing Sun

    Friday, December 18, 2020 8:20 AM
  • User-2054057000 posted

    I have this form validation that checks the input of my textboxes in my page. Once the validation is complete, I want to proceed to a WebMethod. However, I'm not sure how to place the code properly in the javascript.

    You can learn about ajax in web forms from this turorial - jQuery AJAX Example – Calling a C# Function With jQuery AJAX [With Code]

    Sunday, December 20, 2020 9:36 AM