Validating Code Retrieved from Database Using Ajax Requests

Question

Validating Code Retrieved from Database Using Ajax Requests

I can't figure out why my code isn't working as expected. I'm attempting to validate a code by calling a function in the controller. If the code already exists, I want to display a 'failed' message and prevent the form from being submitted. However, this functionality is not working as intended. Even when the failed error is displayed, the form continues to submit.

Here is the code for the view:

Script

$(document).ready(function () {
    $('#signupform').submit(function () {

        var code = $('#txtcode').val();
        alert(code);
        if (code.length > 0) {

            // Validate code
            $.ajax({
                type: "POST",
                url: "@(Url.Action("CheckCode", "Home"))",
                data: {
                    "code": code,
                    "type": "Data"
                },
                success: function (returndata) {
                    if (returndata.match('failed')) {
                        alert(returndata);
                        return false;
                    }
                }
            });
        }
    });
});

Form

@using (Html.BeginForm("ManipuleInfo", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "signupform", name = "signupform" }))
{
    <div>
        <table>
            <tr>
                <td>
                    Code:
                </td>
                <td>
                    @Html.HiddenFor(m => m.Id)
                    @Html.TextBoxFor(m => m.Code, new { @id = "txtcode", @name = "txtcode", @required = "required" })
                </td>
            </tr>
            <tr>
                <td>
                    Title:
                </td>
                <td>
                    @Html.TextBoxFor(m => m.Name)
                </td>
            </tr>
            <tr>
                <td>
                    Sub-Type:
                </td>
                <td>
                    @Html.DropDownListFor(m => m.SubType, listItemsmode)
                </td>
            </tr>
            <tr>
                <td>
                    Subscriber Type:
                </td>
                <td>
                    @Html.DropDownListFor(m => m.SubscriberType, listItemstypes)
                </td>
            </tr>
            <tr>
                <td>
                    <label> Live:</label>
                </td>
                <td>
                    @Html.CheckBoxFor(m => m.Published)
                </td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2">
                    <label> Press add button to start adding fields!</label>
                    <table id="Controls" style="display: none"></table>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div style="text-align:right">
                        <input type="submit" value="Save" class="btnStyle" name="btnSaveData" />
                        <input type="button" value="Cancel" onclick="return Cancel()" class="btnStyle" />
                    </div>
                </td>
            </tr>
        </table>
    </div>
}

Controller

public ActionResult CheckCode(string type, string code)
{
    try
    {
        WCMSDataContext wcmsContext = new WCMSDataContext();

        if (type == "Data")
        {
            var Objp = from p in wcmsContext.Packages.Where(p => p.Code == code && p.Type == "Data") select p;
            if (Objp.Count() > 0)
            {
                return Json("failed");
            }
        }

        return Json("success");
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

c#jquery ajax asp.net-mvc-4 asp.net-ajax

Answer 1

Answer №1

The validation process for the email request is handled asynchronously, which means that it does not pause the execution of the code below and allows the form to be submitted. Additionally, the return false code exists in a separate function and does not prevent the form submission.

To address this issue, there are two potential solutions:

Option 1: Change the ajax call to synchronous, define an isValid variable, assign a value to isValid upon completion of the request, and then check if isValid is false before preventing the form from submitting.

$('#signupform').submit(function () {

    var isValid = false;

    var code = $('#txtcode').val();
    alert(code);
    if (code.length > 0) {
        //validate email
        $.ajax({
            async: false,
            type: "POST",
            url: "@(Url.Action("CheckCode", "Home"))",
            data: {
                "code": code,
                "type": "Data"
            },
            success: function (returndata) {
                if (returndata.match('success')) {
                    alert(returndata);
                    isValid = true;
                }
            }
        });

        if (!isValid)
           return false;
    }
});

Option 2: Add an 'btnSubmit' id to the submit button for easier DOM manipulation. Remove the submit event from the form and attach a click event to the submit button. Prevent the default behavior, send an asynchronous request to verify validity, and upon success, submit the form if valid.

$('#btnSubmit').click(function () {
    var code = $('#txtcode').val();

    if (code.length > 0) {
        //validate email
        $.ajax({
            type: "POST",
            url: "@(Url.Action("CheckCode", "Home"))",
            data: {
                "code": code,
                "type": "Data"
            },
            success: function (returndata) {
                if (returndata.match('success')) {
                    $('#signupform').submit();
                }
            }
        });

        return false;
    }
});

This solution assumes that the validation should only occur if code.length > 0, but if validation should always take place, move the return false portion after this condition.

Note: If the validation is solely for ensuring a 'valid email,' it can be performed on the client side using JavaScript without requiring server requests. Server-side validation for validity could be necessary for checking factors like uniqueness of the email address.

Answer 2

The validation process for the email request is handled asynchronously, which means that it does not pause the execution of the code below and allows the form to be submitted. Additionally, the return false code exists in a separate function and does not prevent the form submission.

To address this issue, there are two potential solutions:

Option 1: Change the ajax call to synchronous, define an isValid variable, assign a value to isValid upon completion of the request, and then check if isValid is false before preventing the form from submitting.

$('#signupform').submit(function () {

    var isValid = false;

    var code = $('#txtcode').val();
    alert(code);
    if (code.length > 0) {
        //validate email
        $.ajax({
            async: false,
            type: "POST",
            url: "@(Url.Action("CheckCode", "Home"))",
            data: {
                "code": code,
                "type": "Data"
            },
            success: function (returndata) {
                if (returndata.match('success')) {
                    alert(returndata);
                    isValid = true;
                }
            }
        });

        if (!isValid)
           return false;
    }
});

Option 2: Add an 'btnSubmit' id to the submit button for easier DOM manipulation. Remove the submit event from the form and attach a click event to the submit button. Prevent the default behavior, send an asynchronous request to verify validity, and upon success, submit the form if valid.

$('#btnSubmit').click(function () {
    var code = $('#txtcode').val();

    if (code.length > 0) {
        //validate email
        $.ajax({
            type: "POST",
            url: "@(Url.Action("CheckCode", "Home"))",
            data: {
                "code": code,
                "type": "Data"
            },
            success: function (returndata) {
                if (returndata.match('success')) {
                    $('#signupform').submit();
                }
            }
        });

        return false;
    }
});

This solution assumes that the validation should only occur if code.length > 0, but if validation should always take place, move the return false portion after this condition.

Note: If the validation is solely for ensuring a 'valid email,' it can be performed on the client side using JavaScript without requiring server requests. Server-side validation for validity could be necessary for checking factors like uniqueness of the email address.

Answer 3

Answer №2

Make sure to use prevent default in order to halt the form from performing a postback. See the revised code snippet below:

 $(document).ready(function () {
        $('#signupform').submit(function (e) {
             e.preventDefault();
            var password = $('#txtpassword').val();
            alert(password);
            if (password.length > 0) {

                //validate password
                $.ajax({
                    type: "POST",
                    url: "@(Url.Action("CheckPassword", "Home"))",
                    data: {
                        "password": password,
                        "type": "Data"
                    },
                    success: function (returndata) {
                        if (returndata.match('incorrect')) {
                            alert(returndata);
                            return false;
                        }
                    }
                });
            }                    
        });
    });
</script>

Answer 4

Make sure to use prevent default in order to halt the form from performing a postback. See the revised code snippet below:

 $(document).ready(function () {
        $('#signupform').submit(function (e) {
             e.preventDefault();
            var password = $('#txtpassword').val();
            alert(password);
            if (password.length > 0) {

                //validate password
                $.ajax({
                    type: "POST",
                    url: "@(Url.Action("CheckPassword", "Home"))",
                    data: {
                        "password": password,
                        "type": "Data"
                    },
                    success: function (returndata) {
                        if (returndata.match('incorrect')) {
                            alert(returndata);
                            return false;
                        }
                    }
                });
            }                    
        });
    });
</script>

Validating Code Retrieved from Database Using Ajax Requests

Answer №1

Answer №2

Similar questions

Developing a Multi-Stage Pop-Up with Jquery

React's componentDidMount fails to trigger for jQuery AJAX request

json success function not being triggered

Asynchronous jQuery AJAX calls are now obsolete and deprecated

Using AJAX call and jquery each loop to work with JSON syntax

retrieve the value of an HTML element once it has been modified

Unable to invoke a function in TypeScript from a Kendo template within the Kendo TreeList component

NodeJs took an unexpected turn

The jQuery AJAX function executing twice upon click

Issue with Ajax-Enabled WCF Service (JSON) encountered during utilization with jquery .ajax()

JavaScript For Each loops are really starting to frustrate me

Bring to life the div that has been clicked

Effortless file uploading with Uploadify

Updating the options in a dropdown menu does not automatically reflect in the corresponding labels when using Ajax and jQuery

Page title missing from browser tab

"Anticipate the presence of expression" mistake

Encountering a stagnant element while performing Selenium testing in the C3 framework

Ways to identify the active anchor within an li element

Trouble accessing onclick function

Display the chosen date from the datepicker in the input field