117 lines
4.2 KiB
HTML
117 lines
4.2 KiB
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">
|
|
<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" novalidate>
|
|
<div class="col-12">
|
|
<label class="form-label" for="name">Name</label>
|
|
<input
|
|
class="form-control"
|
|
id="name"
|
|
maxlength="255"
|
|
pattern="([A-Za-z]{2,}[A-Za-z ]*)"
|
|
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"
|
|
pattern="([A-Za-z]{2,}[A-Za-z ]*)"
|
|
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" 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" pattern="(\+\d{1,3}){0,1}[0-9]{7,}" 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" placeholder="Enter your email address" required type="email">
|
|
{{ 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"
|
|
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"
|
|
placeholder="Repeat password"
|
|
required
|
|
type="password"
|
|
>
|
|
{{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PASSWORD_LENGTH']) }}
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label" for="inputAddress">Address</label>
|
|
<input class="form-control" id="inputAddress" maxlength="255" 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)
|
|
})
|
|
})()
|
|
</script>
|
|
{% endblock %} |