Trigger html5 form validation on asp.Net LinkButton OnClientClick
Question
I have a webform application
In Master Page I have the form
<body class="tile-1-bg">
<form id="form1" runat="server">
and in my 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.
function checkForm()
{
?
}
How can I do?
5 answers
solution1
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()"
<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
<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
solution2
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. You can check the support for this functionality against individual browsers here HTML5 form support - see the form validation section.
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;
}
solution3
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:
Aspx code
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:
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 . so in this way you can achieve what you want
solution4
1 2017-10-06 10:44:44
You could call submit() on the form, that will trigger the browser validation. 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.
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" />
solution5
1 2017-10-06 10:55:41
I recommend you to use 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.