Trigger html5 form validation on asp.Net LinkButton OnClientClick

user_1695091 0
Viewed 1796

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?

asp.net html jquery javascript
5 Answers

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

user_58366710

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

user_36908460

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" />
user_17384910

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.Example is Here

user_60652050

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;
}
user_16601230
Related