卡在不显眼的客户端验证中

Question

希望每个人都做得很好。

我在我的 razor pages .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 来验证输入，然后点击后端代码。如果有人可以提供帮助，将不胜感激。

提前致谢。

Answer 1

你可以尝试使用modal替换alert。你在form中添加提交按钮，它会点击js验证然后在modal中显示消息，如果你在modal中点击提交按钮，你会发布form.Here是一个演示：

查看：

<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 验证，并在 modal 中显示消息：

点击模态按钮，表单将发布。