0

this is my code , how do I add the pattern that Passwor and RepeatPasswor must be the same?

<form>
   <div class="input-container">
    <input type="text" id="Usernam" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
    <label for="Usernam">Username</label>
    <div class="bar"></div>
   </div>
   <div class="input-container">
    <input type="password" id="Passwor" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
    <label for="Passwor">Password</label>
    <div class="bar"></div>
   </div>
   <div class="input-container">
    <input type="password" id="RepeatPasswor" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
    <label for="RepeatPasswor">Ripeti Password</label>
    <div class="bar"></div>
   </div>
   <div class="button-container">
    <button id="reg" type="button" ><span>Registrami</span></button>
   </div>
  </form>
Cœur
  • 37,241
  • 25
  • 195
  • 267
Daniele
  • 704
  • 1
  • 6
  • 22

1 Answers1

1

It's HTML5 validation. Check field into your backend script is required

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>

<body>
<form action="/" method="post">
    <div class="input-container">
        <input type="text" id="Usernam" required="required" pattern=".{4,}"  title="Devi inserire almeno 4 caratteri"/>
        <label for="Usernam">Username</label>
        <div class="bar"></div>
    </div>
    <div class="input-container">
        <input type="password" name="Passwor" id="Passwor" required="required" pattern="^\S{4,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Must have at least 6 characters' : '');
                if (this.checkValidity())
                    form.RepeatPasswor.pattern = this.value;" title="Devi inserire almeno 4 caratteri"/>
        <label for="Passwor">Password</label>
        <div class="bar"></div>
    </div>
    <div class="input-container">
        <input type="password" name="RepeatPasswor" id="RepeatPasswor" required="required" pattern="^\S{4,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');" title="Devi inserire almeno 4 caratteri"/>
        <label for="RepeatPasswor">Ripeti Password</label>
        <div class="bar"></div>
    </div>
    <div class="button-container">
        <button id="reg" type="submit" ><span>Registrami</span></button>
    </div>
</form>

</body>

</html>
Imaginaerum
  • 769
  • 8
  • 22