Advertisement
horozov86

register_user.html with added client-side validation

Apr 3rd, 2024
359
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Python 1.60 KB | None | 0 0
  1. {% extends 'base.html' %}
  2. {% load static %}
  3.  
  4. {% block main_content %}
  5. <div class="login-register-div">
  6.     <div class="login-register-box">
  7.         <h1>MyHoliday</h1>
  8.         <form action="{% url 'register user' %}" method="post" id="register-form">
  9.             <p>
  10.                 {{ form.as_p }}
  11.             </p>
  12.             <div class="button-container">
  13.                 <button type="submit" class="register-button">Register</button>
  14.             </div>
  15.             {% csrf_token %}
  16.         </form>
  17.     </div>
  18.     <div class="second-option">
  19.         <p>If you have an account click <a href="{% url 'login user' %}">Log in</a>.</p>
  20.     </div>
  21. </div>
  22.  
  23. <script>
  24.     document.addEventListener('DOMContentLoaded', function() {
  25.         const form = document.querySelector('#register-form');
  26.         const passwordInput = document.querySelector('#id_password');
  27.  
  28.         form.addEventListener('submit', function(event) {
  29.             if (!/(?=.*[a-zA-Z])/.test(passwordInput.value)) {
  30.                 alert('The password must contain at least one letter.');
  31.                 event.preventDefault();
  32.                 return;
  33.             }
  34.             if (!/(?=.*\d)/.test(passwordInput.value)) {
  35.                 alert('The password must contain at least one digit.');
  36.                 event.preventDefault();
  37.                 return;
  38.             }
  39.             if (!/(?=.*_)/.test(passwordInput.value)) {
  40.                 alert('The password must contain at least one underscore.');
  41.                 event.preventDefault();
  42.                 return;
  43.             }
  44.         });
  45.     });
  46. </script>
  47. {% endblock %}
  48.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement