回发前在 Jquery LinkButton 中验证表单（使用 Html Validate）
Posted
技术标签:
【中文标题】回发前在 Jquery LinkButton 中验证表单（使用 Html Validate）【英文标题】：Validate Form (using Html Validate) in Jquery LinkButton before Postback 【发布时间】：2018-04-07 11:49:54 【问题描述】：我想使用 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 <i aria-hidden="true" class="m-icon-swapright m-icon-white"></i></asp:LinkButton>
</form>
</body>
</head>
【问题讨论】：
您是否尝试过使用asp:RequiredFieldValidator？我想知道您当前是否使用 jQuery.validate 或其他客户端验证模式。
【参考方案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>
注意：对于必需在元素的类中添加“validate[required]”。
您也可以使用正则表达式轻松定义自己的验证规则
【讨论】：
以上是关于回发前在 Jquery LinkButton 中验证表单（使用 Html Validate）的主要内容，如果未能解决你的问题，请参考以下文章
由 UpdatePanel 内 GridView 内的 LinkButton 触发的完整回发
使用 jquery 切换 LinkButton 的启用/禁用状态
jQuery 和 LinkButtons，或常规按钮和 CSS
回发前的 ASP.NET TreeView javascript