So I am new to javascript and wanted to start a project where I would make a form validation thing that insured you had entered your name, email and password. Although when I started building it I realized you can just add required to all of them and when you click submit if you have not entered your info it will give a pre styled message saying to enter. Can someone explain the benefits of using javascript for this specific feature? example below

  <form class="join-form">
        <div class="input-group">
          <label>Name:</label>
          <input type="text" required>
        </div>
        <div class="input-group">
          <label>Email:</label>
          <input type="email" required>
        </div>
        <div class="input-group">
          <label>Password:</label>
          <input type="password" required>
        </div>
        <div class="input-group">
          <button type="submit" class="btn">Join Now</button>
        </div>
      </form>

I used a js file to check if username and password are correct for a login. The js file contains a single username and password that work and I want to know how safe it is, I use flask so I can do the validation in the backend, Is it better or is it also unsafe?

The correct username and password according to the js file:

username = "username"

password = "password"

js file:

function validateForm() {
    let x = document.forms["myForm"]["username"].value;
    let y = document.forms["myForm"]["password"].value;
    let username = document.getElementById('errorUsername');
    let password = document.getElementById('errorPassword');

    if (x != "username" && y != "password") {
      username.style.visibility = "visible"; 
      password.style.visibility = "visible"; 
      return false
    }
    else if (x == "username" && y != "password"){
      username.style.visibility = "hidden"; 
      password.style.visibility = "visible"; 
      return false
    }
    
    else if (x != "username" && y == "password"){
      username.style.visibility = "Password"; 
      password.style.visibility = "hidden"; 
      return false
    }

    else {
      return true
    }
  }

HTML file:

<div class="center">
  <h1>login</h1>
  <form action="/login" method="POST" name="myForm" onsubmit="return validateForm()">
    <div class="txt_field">
      <input type="text" name="username" required autocomplete="off">
      <label for="username">username</label>
    </div>
    <small id=errorUsername>Incorrect username</small>
    <div class="pass"></div>
    <div class="txt_field">
      <input type="password" name="password" required>
      <label id=sisma for="username">password</label>
    </div>
    <small id=errorPassword>Incorrect password</small>
    <div class="pass"></div>
    <input type="submit" value="login">
    <div class="signup_link"> <a href="#"></a>
    </div>
  </form>
</div>

Python file in the backend:

@auth.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == "POST":
        username = request.form.get("username")
        session['logged_in'] = username
        return redirect(url_for('views.home'))
        
    return render_template("login.html")