JSFiddle - React, Tailwind, and code Playground

by Jessie Lau

HTML

<form action="/validations" method="POST">
          {% with messages = get_flashed_messages() %}
          {% for message in messages: %}
          {% if message: %}
          {% if "Name can't be blank" in message: %}
          <p class="flash-message">*{{ message }}</p>
          {% elif "Name can't contain any numbers" in message: %}
          <p class="flash-message">*{{ message }}</p>
          {% elif "Email cannot be blank" in message: %}
          <p class="flash-message">*{{ message }}</p>
          {% elif "Invalid" in message: %}
          <p class="flash-message">*{{ message }}</p>
          {% elif "Password cannot be blank" in message: %}
          <p class="flash-message">*{{ message }}</p>
          {% elif "more than 8 characters" in message: %}
          <p class="flash-message">*{{ message }}</p>
          {% elif "Password is not matched" in message: %}
          <p class="flash-message">*{{ message }}</p>
          {% elif "Thanks for submitting your information" in message: %}
          <p class="success">*{{ message }}</p>
          {% endif %}
          {% endif %}
          {% endfor %}
          {% endwith %}
          <div class="form-group">
            <label for="">First Name:</label>
            <input type="text" name="first_name" class="form-control">
          </div>
          <div class="form-group">
            <label for="">Last Name:</label>
            <input type="text" name="last_name" class="form-control">
          </div>
          <div class="form-group">
            <label for="">email:</label>
            <input type="text" name="email" class="form-control" value="[email protected]">
          </div>
          <div class="form-group">
            <label for="">Password:</label>
            <input type="password" name="pwd" class="form-control">
          </div>
          <div class="form-group">
            <label for="">Confirm Password:</label>
            <input type="password" name="confirm_pwd" class="form-control">
...

JavaScript

from flask import Flask, render_template, request, flash, redirect
import re
from models import User
EMAIL_REGEX = re.compile(r'^[a-zA-Z0-9\.\+_-]+@[a-zA-Z0-9\._-]+\.[a-zA-Z]*$')
app = Flask(__name__)
app.secret_key = "IsSrecretKey"


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/validations", methods=["POST"])
def form_validation():
    if (len(request.form['first_name']) == 0 or
            len(request.form['last_name']) == 0):
        flash("Name cannot be blank.")
        return redirect('/')
    elif not str.isalpha(request.form['first_name']) or not str.isalpha(request.form['last_name']):
        flash("Name cannot contain any numbers.")
        return redirect('/')
    else:
        first_name = request.form['first_name']
        last_name = request.form['last_name']

    # if len(request.form['first_name']) < 1:
    #     flash("First name cannot be blank.")
    #     return redirect('/')
    # elif not str.isalpha(request.form['first_name']):
    #     flash("First name cannot contain any numbers.")
    #     return redirect('/')
    # else:
    #     first_name = request.form['first_name']
    #
    # if len(request.form['last_name']) < 1:
    #     flash("Last name cannot be blank.")
    #     return redirect('/')
    # elif not str.isalpha(request.form['last_name']):
    #     flash("Last name cannot contain any numbers.")
    #     return redirect('/')
    # else:
    #     last_name = request.form['last_name']

    if len(request.form['email']) < 1:
        flash("Email cannot be blank!")
        return redirect('/')
    elif not EMAIL_REGEX.match(request.form['email']):
        flash("Invalid Email Address!")
        return redirect('/')
    else:
        email = request.form['email']

    if len(request.form['pwd']) == 0:
        flash("Password cannot be blank!")
        return redirect('/')
    elif len(request.form['pwd']) < 3:
        flash("Password has to be more than 8 characters.")
        return...