How to keep content in the form when user submits when the information is incorrect so they won't have to type everything over

user_13527049 0
Viewed 148

I'm a new newbie to coding and learn as fast as I can. I built a flask application and have a custom registration and login form.

I'm looking for a way to keep content in the registration form or login form when user clicks submits - however ONLY when the information they input draws the error message [i.e. username exists, password doesn't match, etc.] so they can see their error and correct it.

I'm not sure if I'm asking the question appropriately but search multiple places and can't seem to find the right solutions. I'm sure it's quite simple

My registration & login form works fine when all the criterias are met, but obviously when the error message is displayed - the form clears...

Can you direct me on how to solve or point me to a post?

Here is my signup form:

<h1> Register</h1>
            
            <form method="POST" action="/signup">
                <input type="text" name="name" class="input-box" placeholder="Name"  required >
                <input type="text" name="username" class="input-box" placeholder="Username" required>
                <input type="email" name="email" class="input-box" placeholder="Email" required>
                <!-- Having issues with the pattern feature... Though it shows when you hover, is doesn't show when you type the pattern incorrectly-->
                <input type="Password" name="password" class="input-box" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z).{8,}" title="Must contain: at least one number, one upper and lowercase letter, and at least 8 Characters" required>
                <!-- Having issues with the pattern feature... Though it shows when you hover, is doesn't show when you type the pattern incorrectly-->
                <input type="password" name="conf_password" class="input-box" placeholder="Confirm Password" id="conf_password" pattern="(?=.\*d)(?=.*[a-z])(?=.*[A-Z).{8,}" title="Must contain: at least one number, one upper and lowercase letter, and at least 8 Characters" required>
                
                <p>
                    <span><input type="checkbox"></span>
                    I agree to the terms of the services
                </p>
                <div class="msg">{{ msg }}</div>
                <button type="submit" class="signup-btn">Register</button>
                <hr>
                <p class="or">OR</p>
                <button type="button" class="twitter-btn">Login with Twitter</button>
                <p>Do you have and account? <a href="login">Sign In</a></p>
            </form>

Here is the application's route:

#Add Register Route
@app.route('/signup', methods=['GET', 'POST'])
def signup():
    msg=''
    if request.method == "POST" :
        details = request.form
        Name = details['name']
        Username = details['username']
        Email = details['email']
        Password = details['password']
        # Can do SHA encryption : 
        # Conf_password = sha256_crypt.encrypt(details['conf_password'])
        Conf_password = details['conf_password']

        # Check if account exists using MySQL
        cursor = mysql.connection.cursor()
        
        # Check DB for username...
        result = cursor.execute("SELECT * FROM users WHERE username = %s", [Username])
        account = cursor.fetchone()

        if not Username and not Password and not Email:
            error = 'Please fill out the form!'
            return render_template('signup.html', msg=error)
        elif account:
            error = 'Username already exists'
            return render_template('signup.html', msg=error)
        elif not re.match(r'[A-Za-z0-9]+', Username):
            error = 'Username must contain only characters and numbers!'
            return render_template('signup.html', msg=error)
        elif not re.match(r'[^@]+@[^@]+\.[^@]+', Email):
            error = 'Invalid email address!'
            return render_template('signup.html', msg=error)
        elif not re.match(r'[A-Za-z0-9]+', Password):
            error = 'Password must contain only characters and numbers!'
            return render_template('signup.html', msg=error)
        if Password != Conf_password:
            error = 'Passwords do not MATCH!'
            return render_template('signup.html', msg=error)

What am I doing wrong???

'Thank you' in advance and apologize for asking the same question if it was asked many times before.

DL

flask registration forms html javascript
1 Answers

Here is a simple example I made, you can see now that in the first time the email is empty but after submitting the form it gets the input back to the page even after rendering the signup.html file once again, note that it's only an example I didn't do any validation

your_script.py

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/signup', methods=['GET', 'POST'])
def sign_up():
  email = ""
  if request.method == "POST":
    email = request.form["email"]
  return render_template("signup.html", email=email)

signup.html

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title></title>
</head>
<body>

  <form action="/signup" method="post">
    <input type="email" name="email" value="{{email}}">
    <input type="submit" value="submit">
  </form>

</body>
</html>
user_131581510
Related