<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Form Validation</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>

    <h2>Basic Form Validation using JavaScript</h2>
    
    <form id="myForm" onsubmit="return validateForm()">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <span id="usernameError" class="error"></span>

    <br>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <span id="passwordError" class="error"></span>

    <br>

    <input type="submit" value="Submit">
    </form>

    <script>

    function validateForm() {
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;

    var usernameError = document.getElementById('usernameError');
    var passwordError = document.getElementById('passwordError');

    // Reset error messages
    usernameError.innerHTML = "";
    passwordError.innerHTML = "";

    // Validate Username
    if (username === "") {
        usernameError.innerHTML = "Username is required";
        return false;
    }

    // Validate Password
    if (password === "") {
        passwordError.innerHTML = "Password is required";
        return false;
    }

    // Additional validation logic can be added here

    // Form is valid
    alert("Form submitted successfully!");
    return true;
    }

    </script>

</body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.