jquery - 在回发之前在 Jquery LinkButton 中验证表单(使用 Html Validate)-6ren

jquery - 在回发之前在 Jquery LinkButton 中验证表单(使用 Html Validate)

转载作者：行者123 更新时间：2023-11-28 02:36:33

我想使用代码中所示的 Html 验证来验证此页面。当点击btnSubmit时，会直接进入SaveSubject函数。点击btnSubmit时不显示任何错误。但是当我制作一个没有回发的简单按钮时，它会在输入必填字段等时出错。我想使用 btnSubmit (LinkButton) 进行验证，所以它应该先验证然后再去到ajax调用。我试过 event.preventDefault();

J查询代码:

       $(document).ready(function () {



 $("[id*=btnSubmit]").bind("click", function () {

            var subject = {};

            subject.SubjectName = $("[id*=TxtSubjectName]").val();
            subject.CourseCode = $("[id*=TxtCourseCode]").val();
            subject.BookName = $("[id*=TxtBookName]").val();
            subject.AuthorName = $("[id*=TxtAuthorName]").val();
            subject.Edition = $("[id*=TxtEdition]").val();

            $.ajax({
                url: "manage-subject.aspx/SaveSubject",
                type: "POST",

                data: '{subject: ' + JSON.stringify(subject) + '}',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                datafilter: function (data) { return data; },
                success: function (response) {
                    if (response.d != null) {
                        sweetAlert("Oops...", response.d, "error");

                    }
                    if (response.d == null)
                        swal("Good job!", "Subject has been added successfully!", "success");

                }
            });
            return false;
        });
    });

ASP.NET 代码:

<head>
<body>
    <form id="form1" runat="server">
      <label class="control-label" for="TxtSubjectName">Subject Name
</label>
   <asp:TextBox ID="TxtSubjectName" class="form-control m-wrap span12" placeholder="Enter Subject Name" pattern="^([a-zA-Z\s]{2,50})$"  title="Must Contain Alphatbets Not More than 50 characters" runat="server" required="">
  </asp:TextBox>

<label class="control-label" for="TxtCourseCode">
Course Code
</label>
 <asp:TextBox ID="TxtCourseCode" class="form-control m-wrap span12" placeholder="Enter Course Code" pattern="^([a-zA-Z\s]{2,50})$"  title="Must Contain Alphatbets Not More than 50 characters" runat="server">
</asp:TextBox>

<label class="control-label" for="TxtEdition">Book Name</label>
<asp:TextBox ID="TxtBookName" class="form-control m-wrap span12" placeholder="Enter Book Name" pattern="^([a-zA-Z\s]{2,100})$"  title="Must Contain Alphatbets Not More than 100 characters" runat="server" required=""></asp:TextBox>

<label class="control-label" for="TxtAuthorName">Author Name</label>
<asp:TextBox ID="TxtAuthorName" class="form-control m-wrap span12" placeholder="Enter Author Name" pattern="^([a-zA-Z\s]{2,50})$"  title="Must Contain Alphatbets Not More than 50 characters" runat="server" required=""></asp:TextBox>

<label class="control-label" for="TxtEdition">Edition</label>
<asp:TextBox ID="TxtEdition" class="form-control m-wrap span12" placeholder="Enter Book Edition" pattern="^([a-zA-Z\s]{2,15})$"  title="Must Contain Alphatbets Not More than 15 characters" runat="server"></asp:TextBox>


<asp:LinkButton ID="btnSubmit" type="submit" class="btn green btn-block" runat="server">Add Subject&nbsp;<i aria-hidden="true" class="m-icon-swapright m-icon-white"></i></asp:LinkButton>

</form>
</body>
</head>

最佳答案

您应该尝试使用客户端 jquery 验证，例如 jQuery.validationEngine.

<html>
 <head>
<script src="../ValidationFiles/jquery.validationEngine-en.js"></script>
<script src="../ValidationFiles/jquery.validationEngine.js"></script>
<link href="../ValidationFiles/validationEngine.jquery.css rel="stylesheet"/>   
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#form1").validationEngine();
 });
</script>
</head>
<body>
<form id="#form1">
<asp:TextBox ID="TxtCourseCode" runat="server" CssClass="form-control validate[required]"></asp:TextBox>
<asp:Button ID="btnSave" runat="server" class="btn btn-primary" Text="Add Category" OnClientClick="return jQuery('#form1').validationEngine();" OnClick="btnFooterAddPopupSave_Click" />
</form>
</body>
</html>