当“<按钮>"单击

Form submits when "<button>" is clicked

本文关键字：quot 单击 gt 按钮 lt      更新时间：2023-09-26

我有一个账户创建表单。没有提交按钮，只有一个<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;
    }
});
});

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

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

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

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

$(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;
});
});

您应该添加evt.preventDefault();以使提交只做您想做的事情。

相关文章：