Question

我有一个帐户创建表单。没有提交按钮，只有<button>。现在，当单击按钮时，我运行了jQuery验证。正在运行验证并显示正确的错误，然后提交表单并重新加载页面。即使我没有提交按钮，也没有jQuery submit()功能。

HTML：

<form id="accountCreate" method="POST" action="<?=site_url('account/create')?>">
    <h3>Create an Account</h3>
    <ul>
        <li><input type="text" name="email" placeholder="Email..." /></li>
        <li><input type="password" name="password" placeholder="Password..." id="password" /></li>
        <li><input type="password" placeholder="Verify Password..." id="verifyPassword" /></li>
        <li><button id="button">Create</button></li>
    </ul>
</form>

JS：

$(document).ready(function() {
$('#button').click(function() { 
    var password = $('input#password').val();
    var passwordV = $('input#passwordVerify').val();

    if (password.length >= 6 && password.length <= 24) {
        if (password == passwordV) {

        } else {
            $('div#error').css('display', 'inline');
            $('div#error span.errorMessage').text('hey');
        }
    } else {
        alert('yo');
        return false;
    }
});
});

Answer 1

如果未定义type属性，则<button />充当提交按钮添加type="button"以解决此问题。

<button id="button" type="button">Create</button>

http://www.w3.org/TR/html-markup/button.html#button

Answer 2

您需要为按钮指定默认的type=属性，因为不同的浏览器可以使用不同的默认值。在您的情况下，浏览器默认为type="submit"。

Answer 3

$(document).ready(function() {
$('#button').click(function() { 
var password = $('input#password').val();
var passwordV = $('input#passwordVerify').val();

if (password.length >= 6 && password.length <= 24) {
    if (password == passwordV) {

    } else {
        $('div#error').css('display', 'inline');
        $('div#error span.errorMessage').text('hey');
    }
} else {
    alert('yo');
    return false;
}
//Just add return false
return false;
});
});

Answer 4

您应该添加evt.preventDefault();以使提交仅执行您想要的操作。

单击“<按钮>”时表单提交</button>

4 个答案: