Question

我无法理解为什么我的代码无效。我试图通过调用控制器中的函数来验证代码。如果此代码已经存在，我只是发送'失败'文本，然后我希望表单停止提交。但这不起作用。即使我失败了错误我的表格也没有通过提交来阻止自己。

这是视图的代码

脚本

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

        var code = $('#txtcode').val();
        alert(code);
        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('failed')) {
                        alert(returndata);
                        return false;
                    }
                }
            });
        }
    });
});

表格

@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>
}

控制器

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;
    }
}

Answer 1

验证电子邮件的请求是异步的（阅读常见问题here），因此它不会停止执行下面的代码并提交表单。此外，return false代码还有其他功能，不会停止提交表单。

以下是可以做的事情：

第一个选项：让ajax调用同步。定义isValid变量。请求完成后，将值分配给isValid。然后检查isValid是否为false并停止提交表单。

$('#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;
    }
});

第二个选项：添加＆＃39; btnSubmit＆＃39; id提交btn以便更轻松地操作DOM。从表单中删除提交事件。附加点击事件以提交按钮。防止它的默认行为。检查发送异步请求以检查有效性。成功回调检查数据是否有效以及是否有效提交表格。

$('#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;
    }
});

我认为只有在code.length > 0时才应进行验证，但如果要进行验证，请务必在此条件之后移动return false部分。

注意：如果验证仅适用于有效的电子邮件＆＃39;它可以在客户端通过javascript完成，无需服务器请求。例如，服务器对有效性的请求应该针对电子邮件的唯一性进行。

Answer 2

防止默认停止表单进行回发。请查看下面的更新代码：

 $(document).ready(function () {
        $('#signupform').submit(function (e) {
             e.preventDefault();
            var code = $('#txtcode').val();
            alert(code);
            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('failed')) {
                            alert(returndata);
                            return false;
                        }
                    }
                });
            }                    
        });
    });
</script>

在Ajax调用中验证数据库中的现有代码

2 个答案: