Web Prac 5

#index.php
<!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <h1>Login Page</h1>
  <form id="loginForm" action="login.php" method="post">
    <div style="padding:5px">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username">
      <span class="error" id="usernameError"></span>
    </div>
    <div style="padding:5px">
      <label for="password">Password:</label>
      <input type="password" id="password" name="password">
      <span class="error" id="passwordError"></span>
    </div>
    <div style="padding:5px">
        <label for="check"></label>
        <input type="checkbox" id="check" name="agree">I agree to the Terms and conditions
        <span class="error" id="checkError"></span>
    </div>
    <div style="padding:5px">
      <button type="submit">Login</button>
    </div>
  </form>
</body>
</html>

#script.js
$(document).ready(function(){
    $("#loginForm").submit(function(event){
        var username= $("#username").val();
        var password= $("#password").val();
        var check= $("#check").prop("checked");
        console.log(check);
        //.val extracting the user input and assigning it to the username and password variables
        var valid= true;

        //Clear previous error messages
        $(".error").text("");

        //Validate username
        //=== checking the value and data type
        if (username ===""){
            $("#usernameError").text("Username is required.");
            valid = false;
        }

        //Validate password
        if (password ===""){
            $("#passwordError").text("Password is required.");
            valid = false;
        }

#login.php
<?php echo "success";>