a-dog-a-pet/app/templates/users/register.html

{% extends "layout/layout.html" %}
{% from "forms/validation-block.html" import form_field_validation %} 
{% block title %} register {% endblock %}
{% block head %} 
  {{ super() }}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/register.css') }}">
{% endblock %} 
{% block content %}
<div class="container">

  <div class="register mx-auto">
    <div class="row my-3 my-md-5">
      {% include 'message.html' %}
      <div class="col-2 register__header-logo">
      </div>
      <div class="col-10 gx-md-4 gx-0">
        <h1 class="register__header-title">Register</h1>
      </div>
    </div>
    <form class="row g-3 needs-validation" method="post" novalidate>
      <div class="col-12">
        <label class="form-label" for="name">Name</label>
        <input 
          class="form-control" 
          id="name" 
          maxlength="255"
          name="name" 
          pattern="[A-Za-z ]{2,255}" 
          placeholder="Enter your name" 
          required
          type="text"
        > 
        {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['NAME_FORMAT']) }}
      </div>
      <div class="col-12">
        <label class="form-label" for="lastname">Lastname</label>
        <input
          class="form-control"
          id="lastname"
          maxlength="255"
          name="lastname"
          pattern="[A-Za-z ]{2,255}"
          placeholder="Enter your lastname" 
          required
          type="text" 
        >
        {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['NAME_FORMAT']) }}
      </div>
      <div class="col-md-6">
        <label class="form-label" for="birthdate">Birthdate</label>
        <input class="form-control" id="birthdate" name="birthdate" required type="date">
        {{ form_field_validation(FORM_ERRORS['REQUIRED']) }}
      </div>
      <div class="col-md-6">
        <label class="form-label" for="phonenumber">Phone number</label>
        <input class="form-control" id="phonenumber" name="phonenumber" pattern="(\+\d{1,3}){0,1}[0-9]{7,255}" placeholder="Enter your phone number" required type="tel">
        {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PHONE_NUMBER_FORMAT']) }}
      </div>
      <div class="col-12">
        <label class="form-label" for="email">Email</label>
        <input class="form-control" id="email" maxlength="255" name="email" placeholder="Enter your email address" pattern="[A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$" required >
        {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['VALID_EMAIL']) }}
      </div>
      <div class="col-md-6">
        <label class="form-label" for="password">Password</label>
        <input 
          class="form-control" 
          id="password" 
          maxlength="255"
          minlength="6"
          name="password"
          placeholder="Enter password"
          required
          type="password" 
        >
        {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PASSWORD_LENGTH']) }}
      </div>
      <div class="col-md-6">
        <label class="form-label" for="password-confirmation">Repeat password</label>
        <input 
          class="form-control" 
          id="password-confirmation" 
          maxlength="255"
          minlength="6"
          name="password_confirmation"
          placeholder="Repeat password"
          required
          type="password" 
        >
        {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PASSWORD_LENGTH'] + " " + FORM_ERRORS['MUST_MATCH_PASSWORD']) }}
      </div>
      <div class="col-12">
        <label class="form-label" for="address">Address</label>
        <input class="form-control" id="address" maxlength="255" name="address" placeholder="1234 Main St" required type="text">
        {{ form_field_validation(FORM_ERRORS['REQUIRED']) }}
      </div>
      <div class="col-12 text-center">
        <button class="btn btn-outline-primary register__form-button" type="submit">Register</button>
      </div>
    </form>
  </div>
</div>
<script>
  (() => {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
  })

  const password = document.getElementById("password")
  const password_validation = document.getElementById("password-confirmation")
  password.addEventListener('change', (c) => {
    password_validation.setAttribute("pattern", c.target.value)
  })
 
})()
</script>
{% endblock %}