Question

我的表单如下：

@using (Html.BeginForm("DoRegister", "User", FormMethod.Post))
    {
        @Html.AntiForgeryToken()
        <div class="inputBox">


            @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", @type = "text", @aria_describedby = "emailHelp" })
            <label>First name</label>
            @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger", @style = "float:right;" })
        </div>
        <div class="inputBox">


            @Html.TextBoxFor(m => m.LastName, new { @class = "form-control", @type = "text", @aria_describedby = "emailHelp" })
            <label>Last name</label>
            @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger", @style = "float:right;" })
        </div>
        <div class="inputBox">


            @Html.TextBoxFor(m => m.Email, new { @class = "form-control", @type = "email", @aria_describedby = "emailHelp" })
            <label>Email</label>
            @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger", @style = "float:right;" })
        </div>
        <div class="inputBox">
            @Html.TextBoxFor(m => m.Password, new { @class = "form-control", @type = "password" })
            <label>Password</label>
            @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger", @style = "float:right;" })

        </div>
        <div class="inputBox" style="overflow: hidden;clear: both;height: 80px;">
            <div class="g-recaptcha" style="padding-top:15px; float:left;transform:scaleX(1.385) !important;-webkit-transform:scaleX(1.385) !important;transform-origin:0 0;-webkit-transform-origin:0 0;" data-sitekey="somekey"></div>

        </div>

        <button type="submit" class="btnregister">Create Account</button>
    }

对于此表单，我已启用jQuery非侵入式验证，并在其中添加了以下脚本标记：

Bingo，它的工作原理与预期的一样！现在，我只是缺少提交表单时要处理服务器响应的部分...

例如，我尝试过：

<script>
    $(document).ready(function () {
        $('form').submit(function (event) {
            event.preventDefault();

            if ($(this).valid()) {
                var formdata = new FormData($(this).get(0));

                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: formdata,
                    processData: false,
                    contentType: false,

                    success: function (result) {
                        // element is div holding the ParticalView
                        alert("OK!");
                    }
                });
            }
            return false;
        });
    });
</script>

在这一部分：

 if ($(this).valid()) {

我遇到错误：

Uncaught TypeError: $(...).valid is not a function

这些是我包含的脚本：

<script type="text/javascript" src="~/siteContent/frontpage/js/jquery-3.2.1.min.js"></script>
<script src='@Url.Content("~/siteContent/js/jquery.validate.min.js")'></script>
<script src='@Url.Content("~/siteContent/js/jquery.validate.unobtrusive.js")'></script>

我在这里做什么错了？

有人可以帮我吗？

Answer 1

一旦尝试更改js文件的位置

i）身体顶部的任何一个 ii）身体末端部分

如果您使用布局多次加载 jquery-3.2.1.min.js 文件首先加载js文件，然后将您的 validate.min.js，jquery.validate.unobtrusive.js

Answer 2

<script type="text/javascript" src="~/siteContent/frontpage/js/jquery-3.2.1.min.js"></script>
<script src='@Url.Content("~/siteContent/js/jquery.validate.min.js")'></script>
<script src='@Url.Content("~/siteContent/js/jquery.validate.unobtrusive.js")'></script>

在引用所有脚本之后，将脚本放在此处。

<script>
    $(document).ready(function () {
        $('form').submit(function (event) {
            event.preventDefault();

            if ($(this).valid()) {
                var formdata = new FormData($(this).get(0));

                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: formdata,
                    processData: false,
                    contentType: false,

                    success: function (result) {
                        // element is div holding the ParticalView
                        alert("OK!");
                    }
                });
            }
            return false;
        });
    });
</script>

希望它能起作用：）

jQuery非侵入式验证获取服务器响应并显示它

2 个答案: