Я настраиваю маршрутизацию и базу данных для моего API, и у меня возникают проблемы, связывающие мою логику интерфейса с моей логикой. По сути, я хочу отправить данные формы POST и проверить все это в серверной части и перенаправить на новую страницу, если это успешно.
Я пытался использовать e.preventDefault () во внешнем интерфейсе, за исключением того, что останавливает отправку запроса POST на сервер независимо от того, успешно ли он не.
Вот мои обработчики запросов в моей основной функции:
http.HandleFunc("/signup", signupHandler)
http.HandleFunc("/registered", registeredHandler)
Вот фактические функции обработчика:
func signupHandler(w http.ResponseWriter, r *http.Request) {
tpl.ExecuteTemplate(w, "signup.html", nil)
fmt.Printf("METHOD: %s | URL: %v\n", r.Method, r.URL)
fmt.Printf("User Visting Signup Form\n")
}
func registeredHandler(w http.ResponseWriter, r *http.Request) {
tpl.ExecuteTemplate(w, "login.html", nil)
fmt.Printf("METHOD: %s | URL: %v\n", 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\n, %s\n, %s\n, %s\n", f, l, e, hash)
}
HTML-форма регистрации 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>
логика JavaScript внешнего интерфейса:
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
...
}
Я бы предположил, что почтовый запрос все еще будет работать, так как у меня был обработчик для этого маршрута, за исключением того, что e.preventDefault () полностью останавливает публикацию. Я забрал warnDefault, и запрос на публикацию работает нормально, но проблема в том, что даже если форма НЕ является действительной во внешнем интерфейсе, форма все равно будет отправлена.