在asp.Net LinkButton OnClientClick上触发html5表单验证
[英]Trigger html5 form validation on asp.Net LinkButton OnClientClick
问题描述
I have a webform application 
我有一个webform应用程序
In Master Page I have the form 在母版页中我有表格
<body class="tile-1-bg">
<form id="form1" runat="server">
and in my page.aspx 在我的page.aspx中
<div class="control-group" runat="server" id="divNome">
<label for="txtNome" class="control-label">Nome o Ragione Sociale*</label>
<div class="controls">
<asp:TextBox runat="server" ID="txtNome" class="form-control input-sm" required></asp:TextBox>
</div>
</div>
<asp:Linkbutton runat="server" ID="lnkBtnRegistrati" class="btn btn-default btn-lg btn-block" Text="REGISTRATI" OnClientClick="if(checkForm())return true; else return false;" OnClick="lnkBtnRegistrati_Click"></asp:Linkbutton>
I would like to call a Javascript function that simulate Button submit and return false if some validation goes wrong and shows the errors on form fields. 我想调用一个模拟Button提交的Javascript函数，如果某些验证出错则返回false并在表单字段中显示错误。
function checkForm()
{
?
}
How can I do? 我能怎么做？
5 个解决方案
解决方案1
3 2017-10-06 10:40:15
You can create your own validation and return the value. 您可以创建自己的验证并返回值。 You need to change the OnclientClick to OnClientClick="return checkForm()" 您需要将OnclientClick更改为OnClientClick="return checkForm()"
<div id="errorSummary" style="display: none;">For is invalid!</div>
<script type="text/javascript">
function checkForm() {
var formIsValid = false;
//do your form validation
if ($("#<%= txtNome.ClientID %>").val() != "") {
formIsValid = true;
}
//show or hide the error message
if (!formIsValid) {
$("#errorSummary").show();
} else {
$("#errorSummary").show();
}
//return the validation result
return formIsValid;
}
</script>
But you can also do the same with the build in Validaton Controls and a ValidationSummary 但您也可以使用Validaton Controls和ValidationSummary中的内置版本执行相同的操作
<asp:TextBox runat="server" ID="txtNome"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Input cannot be empty" ControlToValidate="txtNome" Display="Dynamic">
</asp:RequiredFieldValidator>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
<asp:LinkButton runat="server" ID="lnkBtnRegistrati" Text="REGISTRATI"></asp:LinkButton>
Note that the required attribute on input fields is only supported by the most recent browsers, see https://www.w3schools.com/TAgs/att_input_required.asp 请注意，输入字段中的required属性仅受最新浏览器的支持，请参阅https://www.w3schools.com/TAgs/att_input_required.asp
解决方案2
2 2017-10-09 16:57:44
If you don't want to use any JavaScript plugins and the browser(s) that you are targeting support it, you could use the HTML5 form.checkValidity() and form.reportValidity() methods. 如果您不想使用任何JavaScript插件和您要定位的浏览器支持它，您可以使用HTML5 form.checkValidity（）和form.reportValidity（）方法。 You can check the support for this functionality against individual browsers here HTML5 form support - see the form validation section. 您可以在HTML5表单支持中查看针对各个浏览器的此功能支持 - 请参阅表单验证部分。
Example use could be as follows: 示例使用可以如下：
function checkForm() {
var form = $("#<%= form1.ClientID %>")[0];
if (!form.checkValidity()) {
if (form.reportValidity) {
//Show errors on form fields
form.reportValidity();
}
else {
//Fall-back for browsers that don't support reportValidity()
}
return false;
}
return true;
}
解决方案3
1 2017-10-06 10:34:07
What you want is to return the result of the checkform , you can handle it's state in checkform method it self: 你想要的是返回checkform的结果，你可以自己在checkform方法中处理它的状态：
Aspx code Aspx代码
change from 改变
<asp:Linkbutton runat="server" ID="lnkBtnRegistrati" class="btn btn-default btn-lg btn-block" Text="REGISTRATI" OnClientClick="if(checkForm())return true; else return false;" OnClick="lnkBtnRegistrati_Click"></asp:Linkbutton>
to 至
<asp:Linkbutton runat="server" ID="lnkBtnRegistrati" class="btn btn-default
btn-lg btn-block" Text="REGISTRATION" OnClientClick="return checkform();"
OnClick="lnkBtnRegistrati_Click"></asp:Linkbutton>
In your javascript method: 在你的javascript方法中：
function checkForm()
{
if(true) // your condition to check
{
return true;
}
else{
return false;
}
}
Explanation : 说明：
In the Markup Onclientclick will return whether your condition met or not , if your conditions are satisfied , then you would be returning as return true vice versa . 在标记Onclientclick将返回您的条件是否满足，如果您的条件满足，那么您将return true反之亦然。 so in this way you can achieve what you want 所以这样你就可以实现你想要的
解决方案4
1 2017-10-06 10:44:44
You could call submit() on the form, that will trigger the browser validation. 您可以在表单上调用submit（），这将触发浏览器验证。 It doesn't have any return value but automatically submits the form. 它没有任何返回值，但会自动提交表单。 Your code doesn't show that you need to do something else after that, so returning true or false in the OnClientClick event is not necessary. 您的代码未显示您之后需要执行其他操作，因此无需在OnClientClick事件中返回true或false。
document.getElementById("form1").submit();
But unless you left out a part it would be even easier to just replace the link button with a 但除非你遗漏了一部分，否则用一个替换链接按钮会更容易
<input type="submit" runat="server" />
解决方案5
1 2017-10-06 10:55:41
I recommend you to use jQuery.validationEngine . 我建议你使用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="txtEmployeeAddress" runat="server" CssClass="form-control validate[required]"></asp:TextBox>
<asp:Button ID="btnFooterAddPopupSave" 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]”。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.