检查表单是否填充了jQuery

Question

所以我想在允许按下提交按钮之前检查电子邮件输入和密码输入是否都已填写。我一直得到变量保持错误的回复。

我的贾夫文：

var filled1 = false;
var filled2 = false;
setInterval(function() {
if ($(".login_email").length > 2) {
filled1 = true;
} else {
filled1 = false;
}
if($(".login_pass").length > 2) {
filled2 = true;
} else {
filled2 = false;
}
if(filled1 == true && filled2 == true) {
$(".login_sub").css("cursor", "pointer");
$(".login_sub").css("opacity", "1");
$(".login_sub").attr("onclick", "document.forms['login_form'].submit();");
} else {
$(".login_sub").css("cursor", "not-allowed");
$(".login_sub").css("opacity", "0.6");
$(".login_sub").attr("onclick", "");
}
}, 500);

和形式 ：

<form method="POST" name="login_form">
<input type="email" name="login_email" class="login_email" placeholder="Email"/>
<br/>
<input type="password" name="login_pass" class="login_pass" placeholder="Password"/>
<br/>
<div class="login_sub" name="sub_login">Login</div>
</form>

Answer 1

你有一些额外的代码。只需检查字段的值长度：

setInterval(function() {
if($(".login_email").val().length && $(".login_pass").val().length) {
$(".login_sub").css("cursor", "pointer");
$(".login_sub").css("opacity", "1");
$(".login_sub").attr("onclick", "document.forms['login_form'].submit();");
} else {
$(".login_sub").css("cursor", "not-allowed");
$(".login_sub").css("opacity", "0.6");
$(".login_sub").attr("onclick", "");
}
}, 500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" name="login_form">
<input type="email" name="login_email" class="login_email" placeholder="Email"/>
<br/>
<input type="password" name="login_pass" class="login_pass" placeholder="Password"/>
<br/>
<div class="login_sub" name="sub_login">Login</div>
</form>

虽然我个人更喜欢以下方法(没有setInterval()(：

$(".login_sub").css("cursor", "not-allowed");
$(".login_sub").css("opacity", "0.6");
function submitForm() {
if($(".login_email").val().length && $(".login_pass").val().length) {
$(".login_sub").css("cursor", "pointer");
$(".login_sub").css("opacity", "1");
$(".login_sub").attr("onclick", "document.forms['login_form'].submit();");
} else {
$(".login_sub").css("cursor", "not-allowed");
$(".login_sub").css("opacity", "0.6");
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" name="login_form">
<input type="email" oninput="submitForm()" name="login_email" class="login_email" placeholder="Email"/>
<br/>
<input type="password" oninput="submitForm()" name="login_pass" class="login_pass" placeholder="Password"/>
<br/>
<div class="login_sub" name="sub_login">Login</div>
</form>

Answer 2

可以使用required属性和checkValidity()方法。此外，您还需要一个button来submit表单。这里不需要setInterval

let email = document.getElementById('login_email');
let password = document.getElementById('login_pass');

// on keyup from the input check if the field is empty, then disable the 
// submit button
$('.nt-empty').on('keyup', function() {
if (email.checkValidity() && password.checkValidity()) {
$('.login_sub').attr('disabled', false)
} else {
$('.login_sub').attr('disabled', true)
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" name="login_form">
<input type="email" name="login_email" id="login_email" class="login_email nt-empty" placeholder="Email" required />
<br/>
<input type="password" name="login_pass" id="login_pass" class="login_pass nt-empty" placeholder="Password" required />
<br/>
<button disabled class="login_sub" name="sub_login" type="submit">Login</button>
</form>