我想使用代码中所示的 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 <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>
注意:对于 Required，在 Element 的类中添加“validate[required]”。
您也可以使用正则表达式轻松定义自己的验证规则
关于jquery - 在回发之前在 Jquery LinkButton 中验证表单(使用 Html Validate)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46948507/