javascript - 检查表单是否填充了 jQuery

Question

所以我想在允许按下提交按钮之前检查是否填写了电子邮件输入和密码输入。我不断回复说变量保持错误。

我的 Javscript:

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>