Есть ли способ использовать предотвращение по умолчанию и по-прежнему получать почтовые запросы? - PullRequest
Новая
       14

Есть ли способ использовать предотвращение по умолчанию и по-прежнему получать почтовые запросы?

1 голос
/ 17 мая 2019

Я пытаюсь правильно проверить данные формы на моем бэкэнде и все еще иметь возможность приятного пользовательского опыта с проверкой формы на моем внешнем интерфейсе, который написан на Javascript. Я выполнил всю проверку формы во внешнем интерфейсе, чтобы получить желаемый эффект, мы использовали e.PreventDefault() для нашей кнопки отправки, чтобы мы могли отображать любые ошибки ввода пользователю без перезагрузки. Проблема заключается в том, что когда вы действительно заполняете форму сейчас и нажимаете кнопку отправить, на сервер не отправляется POST-запрос из-за protectDefault.

Казалось, что полное удаление строки решило проблему с тем, что наш сервер не получал почтовые запросы, но это создает проблему проверки формы внешнего интерфейса, которая была совершенно бессмысленной, поскольку сообщения об ошибках не отображаются из-за обновленной страницы.

Проверка внешнего интерфейса Javascript: 

let btn = document.querySelector('.btn')

btn.addEventListener('click', function(e) {

    e.preventDefault() // <---- THIS IS THE ISSUE

    let firstName = document.querySelector('.firstName').value
    let lastName = document.querySelector('.lastName').value
    let email = document.querySelector('.email').value
    let createPassword = document.querySelector('.createPassword').value
    let verifyPassword = document.querySelector('.verifyPassword').value

    let firstNameSubmit = false
    let lasttNameSubmit = false
    let emailSubmit = false
    let createPasswordSubmit = false
    let verifyPasswordSubmit = false


    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'

    } else if (!/^\s+$/.test(firstName) || firstName !== null || firstName !== '') {
        document.querySelector('.firstNameError').innerHTML = null
        document.querySelector('.firstName').style.borderBottom = '1px solid #2ecc71'
        firstNameSubmit = true

    } if (/^\s+$/.test(lastName) || lastName == null || lastName == '') {
        document.querySelector('.lastNameError').innerHTML = 'Last Name is a required field'
        document.querySelector('.lastName').style.borderBottom = '1px solid red'

    } else if (!/^\s+$/.test(lastName) || lastName !== null || lastName !== '') {
        document.querySelector('.lastNameError').innerHTML = null
        document.querySelector('.lastName').style.borderBottom = '1px solid #2ecc71'
        lasttNameSubmit = true

    } if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
        document.querySelector('.emailError').innerHTML = 'Please enter a valid email'
        document.querySelector('.email').style.borderBottom = '1px solid red'

    } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
        document.querySelector('.emailError').innerHTML = null
        document.querySelector('.email').style.borderBottom = '1px solid #2ecc71'
        emailSubmit = true

    } if (/^\s+$/.test(createPassword) || createPassword == null || createPassword == '' || createPassword.length < 6) {
        document.querySelector('.createPasswordError').innerHTML = 'Password must be longer than 6 characters'
        document.querySelector('.createPassword').style.borderBottom = '1px solid red'

    } else if (!/^\s+$/.test(createPassword) || createPassword !== null || createPassword !== '' || createPassword.length >= 6) {
        document.querySelector('.createPasswordError').innerHTML = null
        document.querySelector('.createPassword').style.borderBottom = '1px solid #2ecc71'
        createPasswordSubmit = true

    } if (!createPasswordSubmit) {
        document.querySelector('.verifyPasswordError').innerHTML = `Passwords don't match`
        document.querySelector('.verifyPassword').style.borderBottom = '1px solid red'

    } else if (verifyPassword == createPassword){
        document.querySelector('.verifyPasswordError').innerHTML = null
        document.querySelector('.verifyPassword').style.borderBottom = '1px solid #2ecc71'
        verifyPasswordSubmit = true
    }

Go Backend Halders: 

http.HandleFunc("/signup", signupHandler) // inside func main()


func signupHandler(w http.ResponseWriter, r *http.Request) {
    if r.Method != "POST" {
        tpl.ExecuteTemplate(w, "signup.html", nil)
        fmt.Printf("METHOD: %s | URL: %v\n", r.Method, r.URL)
        return
    }
    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) 
    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: 

<form action="/signup" 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>

Я просто хочу знать, есть ли обходной путь для внешнего интерфейса с проверкой формы внутреннего интерфейса либо с помощью protectDefault, или мне нужно подойти к концепции по-другому, если да, то как? Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 17 мая 2019

Поскольку это кнопка type = "submit", event.preventDefault () предотвращает запуск события submit (а событие submit отправляет данные бэкэнду).

Вместо того, чтобы прослушивать событие «click» на кнопке, я думаю, что лучше прослушать событие «submit» в форме.Она будет сработать в форме, когда вы нажмете кнопку с типом = "submit".

Форма будет теперь целью события. 

let form = document.getElementById('my-form')
form.addEventListener('submit', function(event) {})

Итак, в начале вашегоФункция, вы должны быть в состоянии предотвратить действие отправки, вызвав 

event.preventDefault();

Но вы также можете сохранить форму в локальной переменной, так как это элемент, для которого запускается событие submit: 

let form = event.target

Затем, если ошибок нет, вы можете запустить отправку в форме в конце своей функции: 

form.submit()

все вместе: 

let form = document.getElementById('my-form')
form.addEventListener('submit', function(event) {
   event.preventDefault()
   let form = event.target
   let errors = false;
   //do all of the error checking here, if there's an error, set errors to true
   if(!errors) {
       form.submit()
   }
})

(Может быть, есть и лучший способ, но это то, что я мог бы придумать, не задумываясь. Кроме того, было бы проще получить все значения данных, добавив атрибут "name" к каждому входу, а не запрашиваякаждое поле).

0 голосов
/ 19 мая 2019

Я исправил проблему, возившись с предоставленной @Maiya.Я сделал шаг назад и переоценил javascript и то, что именно происходило.Использовал слушателя отправки даже и имел базовую проверку формы на внешнем интерфейсе, и теперь я могу просто гарантировать на внутреннем.Я закончил тем, что использовал e.preventDefault() сразу после того, как я сохранил экземпляр формы в переменной, а затем проверил и отправил, или он просто показывает ошибки.

Изменения JavaScript: 

let submit = document.getElementById("signupForm")

submit.addEventListener("submit", function(e){
    let form = e.target // get form instance
    e.preventDefault()
    console.log(form)
    // error handling
    if (firstNameSubmit == false || lasttNameSubmit  == false || emailSubmit == false || createPasswordSubmit == false || verifyPasswordSubmit == false) {
        console.log('form not done')
    } else { // form completed send to backend!
        form.submit()
    }

RegistrationHandler Changes: 

user := &User{
        fname: r.PostFormValue("fname"),
        lname: r.PostFormValue("lname"),
        email: r.PostFormValue("email"),
        pw:    r.PostFormValue("pass"),
    }
    user.hash = string(helper.HashPassword(user.pw))

    //begin server validation
    if user.fname == "" {
        http.Redirect(w, r, "/signup", http.StatusBadRequest)
        tpl.ExecuteTemplate(w, "signup.html", nil)
    } else {
        http.Redirect(w, r, "/login", http.StatusOK)
    }
...