Question

我想使用Html验证验证此页面，如代码中所示。单击btnSubmit后，它将直接转到SaveSubject函数。单击btnSubmit时不会显示任何错误。但是当我创建一个没有回发的简单按钮时，它将输入错误以输入所需的字段等。我想使用btnSubmit（LinkButton）进行验证，因此它应首先验证然后转到ajax调用。我试过了event.preventDefault();

Jquery代码：

       $(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>

Answer 1

您应该尝试使用客户端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>

注意：对于必需添加＆＃34;验证[必需]＆＃34;在Element的课程中。

您也可以使用正则表达式轻松定义自己的验证规则

在回发之前在Jquery LinkButton中验证表单（使用Html验证）

1 个答案:

在回发之前在Jquery LinkBut​​ton中验证表单（使用Html验证）

1 个答案:

在回发之前在Jquery LinkButton中验证表单（使用Html验证）