当我按下注册按钮时,它不会提交。我怎样才能做到这一点?
< script >
$(function() {
//adds the 'invalid' class if textfield is empty
$('button.btn').on('click', function(event) {
event.preventdefault();
if ('Register User' == $(this).val()) {
for (var i = 0; i < $('.validate').length; i++) {
if ("" == $('.validate').eq(i).val()) {
$('.validate').eq(i).addClass('invalid');
} else {
$('.validate').eq(i).removeClass('invalid');
}
}
}
});
});
< /script>
.invalid {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<form>
<div class="row">
<div class="input-field col s6">
<input name="name" type="text" class="validate" />
<label class="active" for="task_name">Task Name</label>
</div>
</div>
<button class="btn" type="submit" value="Register User" name="createTask">Register</button>
</form>
我也尝试使用“return false”而不是preventdefault(),仍然无法成功提交。
答案 0 :(得分:0)
首先,您需要event.preventDefault()
(大写字母D)。
preventDefault
停止事件即将执行的操作,在这种情况下将是表单提交。这没关系,因为你想要验证输入,但这意味着你必须自己触发表单提交,如果你想要它通过。根据您当前的代码,最简单的方法是检查.invalid
字段的数量,如果没有,则提交,like so:
$(function () {
//adds the 'invalid' class if textfield is empty
$('button.btn').on('click', function (event) {
event.preventDefault();
if ('Register User' == $(this).val()) {
for (var i = 0; i < $('.validate').length; i++) {
if ("" == $('.validate').eq(i).val()) {
$('.validate').eq(i).addClass('invalid');
} else {
$('.validate').eq(i).removeClass('invalid');
}
}
// Submit if there are no errors
if ($('.invalid').length == 0) {
$('form').submit();
}
}
});
});