Javascript – way to tell if all validators have been satisfied

asp.netcjavascriptnetvisual studio

OnclientClick of a button I hide a panel client side. I only want to hide it however if all input is valid. Is this possible in Javascript?

Best Answer

You can use the Page_IsValid property, it allows you to check whether the entire form is valid. You must call the Page_ClientValidate function before checking the value of Page_IsValid. This function is responsible for setting the value of the Page_IsValid property.

<asp:Panel ID="pnl" runat="server">
<asp:Button ID="btn" runat="server" Text="Click" OnClientClick="return Validate();" CausesValidation="false" />

<script type="text/javascript">
    function Validate()
    {
        if (typeof(Page_ClientValidate) == 'function')
            Page_ClientValidate();

        var panel = document.getElementById('pnl');         
        if(Page_IsValid)        
            panel.style.display = 'none';       
        else        
            panel.style.display = 'block';

       return false;        
   }
</script>

Related Solutions

C# – Catch multiple exceptions at once

Catch System.Exception and switch on the types

catch (Exception ex)            
{                
    if (ex is FormatException || ex is OverflowException)
    {
        WebId = Guid.Empty;
        return;
    }
    
    throw;
}

Javascript – Trigger a button click with JavaScript on the Enter key in a text box

In jQuery, the following would work:

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

$("#pw").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#myButton").click();
    }
});

$("#myButton").click(function() {
  alert("Button code executed.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

Or in plain JavaScript, the following would work:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

Best Answer

Related Solutions

C# – Catch multiple exceptions at once

Javascript – Trigger a button click with JavaScript on the Enter key in a text box

Related Topic