I am setting up routing and a database for my API and I am having issues linking my front end logic with my backend logic. Essentially I want to POST form data and check all of it in the backend and redirect to a new page if it is successful.
I have tried using e.preventDefault() in the front end except that stops the POST request from going to the backend regardless of success of not.
Here are my Request handlers in my main function:
http.HandleFunc("/signup", signupHandler)
http.HandleFunc("/registered", registeredHandler)
Here is the actual handler functions:
func signupHandler(w http.ResponseWriter, r *http.Request) {
tpl.ExecuteTemplate(w, "signup.html", nil)
fmt.Printf("METHOD: %s | URL: %v
", r.Method, r.URL)
fmt.Printf("User Visting Signup Form
")
}
func registeredHandler(w http.ResponseWriter, r *http.Request) {
tpl.ExecuteTemplate(w, "login.html", nil)
fmt.Printf("METHOD: %s | URL: %v
", r.Method, r.URL)
r.ParseForm()
f := r.PostFormValue("fname")
l := r.PostFormValue("lname")
e := r.PostFormValue("email")
pw := r.PostFormValue("pass")
hash, err := helper.HashPassword(pw) // returns byte slice use conversion
if err != nil {
fmt.Printf("Hashing Error")
}
fmt.Println("LoginValues")
fmt.Printf("%s
, %s
, %s
, %s
", f, l, e, hash)
}
HTML signup form signup.html (localhost:8080/signup):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../static/css/signup-styles.css">
<link rel="icon" href="../static/img/favicon.ico" type="image/x-icon"/>
<title>Register</title>
<div class="container">
<img src="../static/img/logo.png" alt="logo">
<form action="/registered" method="post">
<h3>First Name</h3>
<input name="fname" type="text" class="firstName">
<p class="firstNameError"></p>
<h3>Last Name</h3>
<input name="lname" type="text" class="lastName">
<p class="lastNameError"></p>
<h3>Email</h3>
<input name="email" type="text" class="email">
<p class="emailError"></p>
<h3>Create Password</h3>
<input name="pass" type="password" class="createPassword">
<p class="createPasswordError"></p>
<h3>Verify Password</h3>
<input type="password" class="verifyPassword">
<p class="verifyPasswordError"></p>
<button class="btn" type="submit">Register</button>
</form>
</div>
</head>
<body>
</body>
<script src="../static/js/signup.js"></script>
</html>
front end javascript logic:
btn.addEventListener('click', function(e) {
e.preventDefault()
if (/^\s+$/.test(firstName) || firstName == null || firstName == '') {
document.querySelector('.firstNameError').innerHTML = 'First Name is a required field'
document.querySelector('.firstName').style.borderBottom = '1px solid red'
// There a ton more if/else doing front end form validation
...
}
I would've assumed the post request still would've worked since I had a handler for that route, except the e.preventDefault() completely stops the post from happening. I have taken away the preventDefault and the post request works fine but the issue is even if the form is NOT valid on the front end the form will still post.