卡住了不干扰用户和客户端的验证

问题描述

希望每个人都做得很好。

我在剃须刀页面.NET Core 3.1中使用了一些简洁的jQuery，用于表单提交：

<form asp-action="/Test" class="frm__action frm__validate" id="form2" 
      data-ajax-method="post"
      data-ajax="true"
      data-ajax-success="success"
      data-ajax-failure="Failed"
      data-ajax-loading="#spinner"
      data-ajax-loading-duration="2000">
    <!-- FORM ROW -->
    <div class="form-row">
        <div class="form-group col-sm-6">
            <label asp-for="@Model.Tests.Name"></label><span class="txt__red">*</span>
            <input asp-for="@Model.Tests.Name" type="text" id="txtcname" class="form-control" data-pristine-required="true"
                   data-pristine-required-message="Please enter your company name.">
            <span id="nameExists" hidden></span>
        </div>
    </div><!-- FORM ROW -->

    <!-- FORM ROW -->
    <div class="form-row">
        <div class="col-12 text-right">
            <input type="submit" class="btn Box__shadow btn__orange__filled btn__sm" value="Submit">
        </div>
    </div><!-- FORM ROW -->
</form> 

我正在使用原始验证进行客户端验证，这是有效的代码：

 $(".frm__validate").each(function () {
        frmID = $(this).attr("id");
        var form = document.getElementById(frmID);

        // create the pristine instance
        pristine = new Pristine(form,defaultConfig,false);

        form.addEventListener("submit",function (e) {
e.preventDefault();
            // check if the form is valid
            var valid = pristine.validate();

            if (valid) {
                alert("Form is Valid");
            }
            else {
                alert("For is not Valid");
            }
        });
    }); 

问题非常简单：每当我单击“提交”按钮时，它就会同时触及Razor Page C＃和此JS中的动作。

但是，我要的是先打JS来验证输入，然后打后端代码。如果有人可以提供帮助，将不胜感激。

谢谢。

解决方法

您可以尝试使用模式替换alert。您在表单中添加了Submit按钮，它将点击js进行验证，然后以模式显示消息，如果您单击模式中的Submit按钮，您将发布表格。这是一个演示：

查看：

<form asp-action="/Test" class="frm__action frm__validate" id="form2"
      data-ajax-method="post"
      data-ajax="true"
      data-ajax-success="success"
      data-ajax-failure="failed"
      data-ajax-loading="#spinner"
      data-ajax-loading-duration="2000">
    <!-- FORM ROW -->
    <div class="form-row">
        <div class="form-group col-sm-6">
            <label asp-for="@Model.Tests.Name"></label><span class="txt__red">*</span>
            <input asp-for="@Model.Tests.Name" type="text" id="txtcname" class="form-control" data-pristine-required="true"
                   data-pristine-required-message="Please enter your company name.">
            <span id="nameExists" hidden></span>
        </div>
    </div><!-- FORM ROW -->
    <!-- FORM ROW -->
    <div class="form-row">
        <div class="col-12 text-right">
            <button id="validate" class="btn box__shadow btn__orange__filled btn__sm" >Submit</button>
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            @*<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>*@
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" id="modal-body">
                            <p id="content"></p>
                        </div>
                        <div class="modal-footer" id="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" id="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- FORM ROW -->
</form>

@section scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js"></script>
    <script src="~/lib/jquery/dist/pristine.js"></script>
    <script>
       
       
        $(".frm__validate").each(function () {
            frmID = $(this).attr("id");
            var form = document.getElementById(frmID);

            // create the pristine instance
            pristine = new Pristine(form,defaultConfig,false);
            document.getElementById("validate").addEventListener("click",function () {
                // check if the form is valid
                var valid = pristine.validate();

                if (valid) {
                    $("#content")[0].innerHTML = "Form is Valid";
                    
                }
                else {
                    $("#content")[0].innerHTML = "Form is not Valid";
                }
                $('#exampleModal').modal('show');
            });
         
        });
    </script>
}

单击提交按钮时，它将单击js validate，并以模式显示消息：

然后单击模式按钮，表单将发布。