Validating User Inputs Using Javascript-CodePudding

I am making a page that validates user inputs. The username should be in an email format and the password should be 7 or more characters. I think I have the code down, but am struggling to connect the javascript so that it works properly and validates the user inputs.

Here is the code:

<!DOCTYPE html>
<html>
 <head>
  <title></title>
   <link rel="stylesheet" href="assignment.css" />
 </head>

 <body>
  <form>
   <h1>Sign in</h1>
   <label for="username"><b>Username</b></label>
   <input type="text" placeholder="Enter Username" name="username" required>
   <br><br>
   <label for="password"><b>Password</b></label>
   <input type="password" placeholder="Enter Password" name="password" required>
   <br><br>
   <button type="submit" >Sign In</button>
  </form>

  function validateForm() {
let regexEmail = / ^ \ w  ([\.-] ? \ w  ) * @ \ w  ([\.-] ? \ w  ) *(\.\ w { 2, 3 })   $ /;
let username = document.forms["myForm"]["username"].value;
let password = document.forms["myForm"]["password"].value;
if (
    password.length >= 7 || username.match(regexEmail)
) {
    alert("Welcome");
    return true;
}
else {
    alert("error, username must be in email format & password must be 7 or more characters");
    return false;
}
 </body>
</html>

CodePudding user response：

you are missing a bunch of script tags and the JS needs to be refactored with some minor changes.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="assignment.css" />
  </head>

  <body>
    <form>
      <h1>Sign in</h1>
      <label for="username"><b>Username</b></label>
      <input
        type="text"
        placeholder="Enter Username"
        name="username"
        id="username"
        required
      />
      <br /><br />
      <label for="password"><b>Password</b></label>
      <input
        type="password"
        placeholder="Enter Password"
        name="password"
        id="password"
        required
      />
      <br /><br />
      <button type="submit" id="btn" >Sign In</button>
    </form>
    <script type="text/javascript">
      let regexEmail =
        / ^ \ w  ([\.-] ? \ w  ) * @ \ w  ([\.-] ? \ w  ) *(\.\ w { 2, 3 })   $ /;
      let username = document.getElementById("username").value;
      let password = document.getElementById("password").value;
      document.getElementById("btn").addEventListener("click", (e) => {
        e.preventDefault();
        if (password.length >= 7 || username.match(regexEmail)) {
          alert("Welcome");
        } else {
          alert(
            "error, username must be in email format & password must be 7 or more characters"
          );
        }
      });
    </script>
  </body>
</html>

CodePudding user response：

There's a couple of issues I can see here, first of all your JavaScript isn't within <script></script> tags.

Second, the validateForm function you have written isn't attached to your form HTML. Take a look here to see how you can run a function when your form is submitted:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

Edit: Here's the list of issues:

Your form doesn't have an id attribute but you refer to myForm in your function
Your JavaScript needs to be wrapped in <script> tags
Your regex has spaces in which will prevent it from matching
You're missing a closing curly bracket at the end of your function
You're not attaching the function to your form so it won't be called when it is submitted (as per the link I posted).

Here's the fixed code:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="assignment.css" />
  </head>

  <body>
    <form id="myForm">
      <h1>Sign in</h1>
      <label for="username"><b>Username</b></label>
      <input
        type="text"
        placeholder="Enter Username"
        name="username"
        required
      />
      <br /><br />
      <label for="password"><b>Password</b></label>
      <input
        type="password"
        placeholder="Enter Password"
        name="password"
        required
      />
      <br /><br />
      <button type="submit" >Sign In</button>
    </form>

    <script>
      function validateForm() {
        let regexEmail = /^\w ([\.-]?\w )*@\w ([\.-]?\w )*(\.\w{2,3}) $/;
        let username = document.forms["myForm"]["username"].value;
        let password = document.forms["myForm"]["password"].value;

        if (password.length >= 7 || username.match(regexEmail)) {
          alert("Welcome");
          return true;
        } else {
          alert(
            "error, username must be in email format & password must be 7 or more characters"
          );
          return false;
        }
      }

      const formEle = document.getElementById("myForm");
      formEle.addEventListener("submit", validateForm);
    </script>
  </body>
</html>

Re:your comment - you have a function and you have an HTML form. In the original code, where is your function called? What triggers the validation on the form fields to be run? In the code I've provided I've attached your function to the submit event of the form so when the form is submitted, your function is called. There's other ways this could be handled - adding a click handler on the button, adding a change handler to the form fields, etc. etc.