JSFiddle - React, Tailwind, and code Playground

by Ravichandra Thota

HTML

<form id="paymentForm" method="POST">
    
    <body>
        <div class="form-group">
            <input type="text" name="name" value=" " id="txtName" />
            <input type="text" name="name" value=" " /><span id="errorName"></span>

            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
            <input type="text" name="name" value=" " />
            <br />
           ...

JavaScript

$(document).ready(function () {
    window.onload = function () { // onobtrusively adding the submit handler
        document.getElementById("paymentForm").onsubmit = function () { // needs an ID
            var val = this.txtName.value; // 'this' is the form 
            if (val == null || val.trim() == "") {
                $("#errorName").text("Please Enter Valid Name");
                $("#errorName").css("color", "red");
                this.txtName.focus();
                $("#txtName").css("border", "1px solid red");

                return false; // cancel submission
            }
            return true; // allow submit
        }
    }
});