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>

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>

检查表单是否用jQuery填充

2 个答案: