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

I want to validate this page using Html Validation like shown in code. When btnSubmit is clicked, it will directly go to SaveSubject function.It don't show any errors when btnSubmit is clicked. But when i make a simple button with no postback it will give error to enter required field etc. I want to Validate using btnSubmit (LinkButton) so it should validate first then go to ajax call. I have tried event.preventDefault();

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

Jquery code:

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

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

1 个解决方案

#1

You should try using Client-side jquery validation Like jQuery.validationEngine.

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

Note: For Required Add "validate[required]" in the Element's class.

注意:For Required在Element的类中添加“validate [required]”。

You can also easily define your own validation rule using regex as well

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

1 个解决方案

#1

更多相关文章

随机推荐

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

1 个解决方案

#1

更多相关文章

随机推荐

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