Jqueryvalidate的.validate()方法不在ASP Core中执行

时间:2019-09-08 22:09:49

标签: javascript c# asp.net-core model-view-controller

我正在尝试通过ajax提交表单,它可以正常工作,但是没有验证。因此,我已经添加了JQuery验证库并将代码添加到了文档中所述的处理程序中,但是似乎没有执行

cshtml页面:

@{
    ViewData["Title"] = "CreateProduct";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1 class="text-center">Create Product</h1>
<br>

<form method="post" id="formdata" asp-controller="Product" asp-action="UploadProduct">
    <div class="form-group">
        <p>Please provide a name for your product:</p>
        <input type="text" name="Name" required />
    </div>
    <div class="form-group">
        <p>Please provide a price for your product:</p>
        <input type="number" name="Price" required />
    </div>
    <div class="form-group">
        <p>Please provide a description for your product:</p>
        <input type="text" name="Description" required />
    </div>
</form>

<button class="btn btn-primary" id="subBtn">Upload Files</button>

@section scripts
{
    <script>
        $(function () {

            $('#subBtn').click(function (e) {
                var formData = $('#formdata').serialize();

                $('#formdata').validate({
                    debug: true,
                    submitHandler: function () {
                        $.ajax({
                            type: 'POST',
                            url: '/Product/UploadProduct',
                            data: formData,
                            success: function (e) {
                                Toastify({
                                    text: "Product submition successful!",
                                    duration: 3000,
                                    gravity: "bottom", // `top` or `bottom`
                                    position: 'right', // `left`, `center` or `right`
                                    backgroundColor: 'blue',//"linear-gradient(to right, #00b09b, #96c93d)",
                                    stopOnFocus: true, // Prevents dismissing of toast on hover
                                    onClick: function () { } // Callback after click
                                }).showToast();

                                $(':input', '#formdata')
                                    .not(':button, :submit, :reset, :hidden')
                                    .val('')
                                    .prop('checked', false)
                                    .prop('selected', false);
                            }
                        }).fail(function (e) {
                            //toastr.error('Product not added');
                        });
                    }
                });
            });
        });

    </script>
}

并且我已将引用添加到_Layout.cshtml:

 <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
        <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
        <script src="~/lib/jquery-validation/dist/additional-methods.js"></script>
        <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
    </environment>

我想再次补充一下,逻辑是有效的,只是validate()方法没有执行。

1 个答案:

答案 0 :(得分:1)

ALTER FUNCTION [dbo].[UDF_GetNumeric] (@strAlphaNumeric VARCHAR(256)) RETURNS VARCHAR(256) AS BEGIN DECLARE @intAlpha INT SET @intAlpha = PATINDEX('%[^0-9]%', @strAlphaNumeric) BEGIN WHILE @intAlpha > 0 BEGIN SET @strAlphaNumeric = STUFF(@strAlphaNumeric, @intAlpha, 1, '' ) SET @intAlpha = PATINDEX('%[^0-9]%', @strAlphaNumeric ) END END RETURN ISNULL(@strAlphaNumeric,0) END 方法仅用于初始化表单上的插件。它不属于提交按钮的单击处理程序内。您应该将.validate()方法移到客户端处理程序之外,并在validate()事件内序列化数据:

submitHandler

然后您可以使用<script> $(function () { $('#formdata').validate({ submitHandler: function () { var formData = $('#formdata').serialize(); alert("ad"); $.ajax({ type: 'POST', url: '/Product/UploadProduct', data: formData, success: function (e) { Toastify({ text: "Product submition successful!", duration: 3000, gravity: "bottom", // `top` or `bottom` position: 'right', // `left`, `center` or `right` backgroundColor: 'blue',//"linear-gradient(to right, #00b09b, #96c93d)", stopOnFocus: true, // Prevents dismissing of toast on hover onClick: function () { } // Callback after click }).showToast(); $(':input', '#formdata') .not(':button, :submit, :reset, :hidden') .val('') .prop('checked', false) .prop('selected', false); } }).fail(function (e) { //toastr.error('Product not added'); }); } }); }); </script> 标签内的“提交”按钮来触发提交:

form