I want to check if the email adress is already in my database using onfocusout in html. If the email adress exists then the messages shows me that the email exists when clicking out but when I rewrite another email adress the message disappears but when I click submit then the messages appears again and the button doesnt let me go to the next page even though I wrote a different email adress. The whole validation process goes to bottle-python route which delivers none if the email is not there or delivers the email if exists.
The Email already exists in the database no problem:
I wrote this and obviously doesnt exists and still gives me the message and doesnt let me click submit:
part of HTML + Javascript
'''
<div class="box1">
<form method="POST" id="form" name="form">
<p>
<label for="a">First Name:</label>
<input id="a" type="text" name="firstName" placeholder="First Name" required>
</p>
<p>
<label for="b">Last Name:</label>
<input id="b" type="text" name="lastName" placeholder="Last Name" required>
</p>
<p>
<label for="">Birthdate:</label>
<input id="" type="date" name="birthD" placeholder="Date" required>
</p>
<p>
<label for="">Adress:</label>
<input id="" type="text" name="adress" placeholder="Adress" required>
</p>
<p>
<label for="">E-Mail Adress:</label>
<input id="email" type="email" name="email" placeholder="example@mail.com" onfocusout="checkIfUserExists()" required>
</p>
<p>
<label for="">Phone:</label>
<input id="phone" type="text" name="phone" placeholder="Phone Number" required>
</p>
<p>
<label for="">Choose your form of Payment:</label>
<select name="payment" required>
<option option value="" disabled selected>Payment</option>
<option value="Credit">Credit</option>
<option value="Debit">Debit</option>
<option value="Paypal">Paypal</option>
</select>
</p>
<p>
<input type="submit" value="submit">
</p>
</form>
<div class="box11">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
const checkIfUserExists = () => {
const registrationForm = document.forms['form']
const emailFormElement = registrationForm['email']
const email = emailFormElement.value
axios.post('/validate_email',{ //goes to bottle python
email: email //
})
.then((response) => {
if (response.data.user_exists == "true") {
emailFormElement.setCustomValidity("This email adress already exist")
emailFormElement.checktValidity()
}
else {
}
}, (error) => {
console.log(error)
})
}
</script>
''' Route validates if the email is in database '''
@route('/validate_email', method=['POST'])
def validate_email():
if request.method == 'POST':
email_adress = request.json['email'] #the values comes from javascript
email = emailextraction(email_adress)
print(email)
if email:
return {"user_exists": "true"} #this goes back to javascript
else:
return {"user_exists": "false"}
'''