How to Validate Textbox in JavaScript

Anika Tabassum Era Feb 02, 2024
  1. Use a Conditional Statement to Validate a Textbox in JavaScript
  2. Use jQuery to Validate a Textbox in JavaScript
How to Validate 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:

Use Conditional Statement to Validate a Textbox

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:

Use jQuery to Validate a Textbox

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Related Article - JavaScript Textbox