In this article I will explain with an example, how to validate TextBox on Button Click using jQuery.
When the Validate Button is clicked, a jQuery event handler is called and the TextBox is referenced and its value is compared with Empty string and if the condition tests TRUE then the TextBox is considered Empty.
 
 
HTML Markup
The following HTML Markup consists of an HTML TextBox and a Button.
<input type="text" id="txtName" />
<input type="button" id="btnCheck" value="Check Empty" />
 
 
jQuery code for validating TextBox on Button Click
Inside the document.ready event handler, the Validate Button has been assigned with a Click event handler.
When the Validate Button is clicked, first the TextBox is referenced using jQuery and then its value is trimmed and compared with an Empty string.
If the condition tests TRUE, the TextBox is considered Empty and a JavaScript Alert Message is displayed.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnCheck").click(function () {
            if ($.trim($("#txtName").val()) == "") {
                alert("Please enter Name!");
            }
        });
    });
</script>
 
 
Screenshot
Validate TextBox on Button Click using jQuery
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code