Question

HTML

<form method='POST' id='signup_form'>
    <label for='email'>E-mail:</label><br />
    <input type='email' name='email' /><br /><br />
    <label for='username'>Username:</label><br />
    <input type='text' name='username' /><br /><br />
    <label for='password'>Password:</label><br />
    <input type='password' name='password' /><br /><br />
    <label for='confirmpassword'>Confirm Password:</label><br />
    <input type='password' name='confirmpassword' /><br /><br />
    <input type='submit' name='signup' />
</form>

的JavaScript

const signup_form = document.getElementById('signup_form');

signup_form.addEventListener('submit', function() {
    event.preventDefault();

    let missing_input = false;

    for (let i = 0; i < this.children.length; i++) {
        if (this.children[i].type !== undefined && this.children[i].type !== 'submit')
            if (this.children[i].value === '') {
                missing_input = true;
                break;
            }
    }

    if (!missing_input)
        this.submit();
});

所以我在将表单提交给PHP之前尝试在JavaScript中进行一些验证。如果用户尝试提交表单，我会检查输入以查看它们是否为空白，如果其中任何一个是，那么我就不会提交表单。该功能正常，但是当表单提交时，<input type='submit' name='signup' />不会显示在_POST中。所有其他输入都有。在我实现事件监听器之前它工作正常。

这是$_POST成功提交后的样子：

Array ( [email] => eric@live.ca [username] => ericsartor [password] => asdasdasd [confirmpassword] => asdasdasd)

我做错了什么吗？如果我删除事件监听器，它肯定能正常工作，但我不明白为什么会阻止提交按钮被包含在请求中...

编辑：感谢Andre发布的链接，我找到了解决方案。我发布了自己的答案，但我还不能接受。

Answer 1

我认为它使用的方式更简单：onsubmit='return validaForm(this)'

所以...

<form method='POST' id='signup_form' onsubmit='return validaForm(this)'>
    <label for='email'>E-mail:</label><br />
    <input type='email' name='email' /><br /><br />
    <label for='username'>Username:</label><br />
    <input type='text' name='username' /><br /><br />
    <label for='password'>Password:</label><br />
    <input type='password' name='password' /><br /><br />
    <label for='confirmpassword'>Confirm Password:</label><br />
    <input type='password' name='confirmpassword' /><br /><br />
    <input type='submit' name='signup' />
</form>

和

    <script>

    var validaForm = function(signup_form) {

        event.preventDefault();

        let missing_input = false;

        for (let i = 0; i < signup_form.children.length; i++) {
            if (signup_form.children[i].type !== undefined && signup_form.children[i].type !== 'submit')
                if (signup_form.children[i].value === '') {
                    missing_input = true;
                    break;
                }
        }

        if (!missing_input) {
            signup_form.submit();
        } else {
            alert('field empty');
        }

    }

    </script>

参考文献：

javascript: validate form before submit?

HTML/Javascript: Simple form validation on submit

get all the elements of a particular form

Answer 2

问题是我在错误的时间打电话给const signup_form = document.getElementById('signup_form'); signup_form.addEventListener('submit', function() { let missing_input = false; for (let i = 0; i < this.children.length; i++) { if (this.children[i].type !== undefined && this.children[i].type !== 'submit') if (this.children[i].value === '') { missing_input = true; break; } } if (missing_input) event.preventDefault(); });。我已将JavaScript更改为：

signup

如果我确实发现问题，我只会阻止默认提交。以前，我每次都在阻止初始提交，然后在验证完所有内容后尝试重新提交。有关此问题导致strings.TrimSpace变量不会传递到请求中。安德烈罗德里格斯的道具发布了另一个提到这个问题的链接！

Answer 3

不确定它是否有帮助，但您至少需要将事件参数传递给这样的回调，否则您将无法访问它：

signup_form.addEventListener('submit', function(event) {//content})

通过JavaScript

3 个答案: