How to make a validation form to email and password

Question

I would like to make a validation of a form. More precisely, I need to ask for my user to fill the form with the following conditions:

1. email: it must have letters and one @,
2. password: it must have letters, numbers and only lower letters. How can I ask it to my users in JS?

I have here the code for "name" but I don't know which method use to others:

let nome = document.querySelector('#name')
nome.addEventListener('keyup', () => 
    {if(nome.value.length <= 5)
        {nome.setAttribute('style', 'border-color: red')}
    else
        {nome.setAttribute('style', 'border-color: green')}});

Indeed I have been using, now, this code here. These are the variables:

let nome = document.getElementById('nome');
let nomeCombinaRegex = nome.value.match(/^((\b[A-zÀ-ú']{3,40}\b)\s*){2,}$/);
let nomeVerde = nome.setAttribute('style', 'color:green');
let nomeRed = nome.setAttribute('style', 'color:red');

This is the HTML:

<div class="form">
<i class="bi bi-person"></i>
<input id="nome" type="text" required autofocus placeholder="Nome" oninput="nameValidate()">
</div>

This is the JS Function:

function nameValidate()
    {if(nomeCombinaRegex)
        {nomeVerde}
    else 
        {nomeAlert;
        nomeRed}}

Question: What am I doing wrong? the code doesn't work (I'm new in JS)

Answer 1

Regular expressions can be used to describe strings with certain conditions. For example, you can test your email and password strings as follows:

const emailRegex = /^[A-za-z]+@[A-za-z]+$/
const passwordRegex = /^[a-z0-9]+$/

emailRegex.test(email)
passwordRegex.test(password)

Answer 2

the most fun and easy way to solve this issue is using regex, you can play with it here. Similar question is here , you can create regex according to your need

function matchString() {
  var string = document.querySelector('#name');

  // it matches small and capital alphabeds,
  // if you dont want number remove 0-9
  // this also work for only alphabeds and @ ([a-zA-Z0-9])+@ or ^([a-zA-Z0-9])+\@
  var result = string.match(/^([a-zA-Z0-9_\.\-])+\@/g);
  document.write("Output : " + result);
}

Answer 3

Do not simply change the styles. Instead, inform the browser that the input is invalid. This provides a better user experience, especially for people using screen readers.

For email addresses, browsers already have a built-in way to check whether they are valid. For more complex conditions, you can use the pattern attribute or the "input validity" methods.

const email = document.getElementById("email-input");

const pass = document.getElementById("pass-input");
pass.addEventListener("input", (ev) => {
  if (pass.value.match(/\d/) && pass.value.match(/[a-z]/) && !pass.value.match(/[A-Z]/)) {
    pass.setCustomValidity("");
  } else {
    pass.setCustomValidity('"' + pass.value + '" is not a valid password.');
  }
});

const form = document.getElementById("signup-form");
form.addEventListener("submit", (ev) => {
  alert(`Success!\nE-mail: ${email.value}\nPassword: ${pass.value}`);

  // Prevent the navigation
  ev.preventDefault();
});

input:valid {
  border-color: green;
}
input:invalid {
  border-color: red;
}

<form id="signup-form">
  <label for="email">E-mail</label> <input type="email" name="email"  id="email-input" required><br>
  <label for="pass">Password</label> <input type="password" name="pass" id="pass-input" required><br>
  <button type="submit">Submit</button>
</form>