Change HTML TextBox border color if TextBox is empty on Button Click in JavaScript

letstry
 
on Mar 13, 2021 08:18 AM
Sample_866026.zip
822 Views

How to make HTML, JavaScript or jQuery and use ".class" not ID

Here is ASP.Net code: 

Change TextBox border color if TextBox is empty using jQuery in ASP.Net

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Mar 15, 2021 12:47 AM

Hi letstry,

Refer below sample.

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .error {
            color: red;
            display: none;
        }
    </style>
    <script type="text/javascript">
        function Validate() {
            var name = document.getElementsByClassName("name");
            var error = document.getElementsByClassName("error");
            error[0].style.display = name[0].value == "" ? "block" : "none";
            name[0].style.border = name[0].value == "" ? "1px solid red" : "";
            name[0].focus();
        }
    </script>
</head>
<body>
    Name: <input type="text" class="name" />
    <span class="error">Please Enter Name</span><br />
    <input type="button" value="Submit" onclick="Validate();" />
</body>
</html>

Demo