How to Validate Textbox in JavaScript

1. Use a Conditional Statement to Validate a Textbox in JavaScript
2. Use jQuery to Validate a Textbox in JavaScript

A textbox is considered valid when it has valid content. The alert or console might fire up with a message to ensure the user that he missed updating the value.

This is one useful and important task when submitting forms. Supposedly, a form requires email ids, and it will not route to the destination page until a valid mail is placed.

All these values are related to the database, and thus, null values may lead to complications and miscalculations.

In the next segment, we will define two ways of validating a text area. One is to create a basic conditional statement to check the input value and return message.

And another one is to see if jQuery also performs similarly. Let’s check the code fences for a better understanding.

Use a Conditional Statement to Validate a Textbox in JavaScript

Here, we will generate two input fields, one for the text and the other for the password. The following task is to check the input values in the text boxes.

We will set both of the fields as required. This implies that each textbox will have at least one character (not space or blank).

So, in our case, we will type in the script tag that if the textbox contents are null or not defined, the windows.alert will trigger with a message.

Code Snippet:

<input type="text" id="login" placeholder="Username or Email"  />
<input type="password" id="password" placeholder="Password" />
<input type="submit" value="Login" onclick="validate();" />
<script>
        function validate() {
            if (document.getElementById("login").value == "") {
                alert("Username cannot be blank");
            } else if (document.getElementById("password").value == "") {
                alert("Password cannot be blank.");
            }
        }
</script>

Output:

Whenever we have set the text input field to some value and pressed login, it emphasizes with the windows.alert that we missed the required textbox password.

Validating a textbox is very handy to skip more complicated tasks in the further drive. It is more like a precaution to let us know that we must set exact inputs.

Use jQuery to Validate a Textbox in JavaScript

jQuery way of validating a textbox is similar to the previous, and we will examine that in the following example. If we try to differentiate between two tasks, it will be that jQuery prepares a jQuery object, whereas the previous one used a JavaScript object to trigger the individual ids.

Let’s hop into the code segment.

Code Snippet:

<input type="text" id="txt" />
<input type="button" id="btn" value="Check" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            if ($("#txt").val() == "") {
                alert("Please enter Name!");
            }
        });
    });
</script>

Output: