CODEWITHSUNDEEP
javascriptjqueryhtml
Tristan Schlarman
Tristan Schlarman

Reputation: 117

Checking if form is filled with jQuery

So I want to check if both the email input and password input are filled before allowing the submit button to be pressed. I keep getting back that the variables stay false.

My 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);

and Form : 

<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>

Upvotes: 1

Views: 379

Answers (2)

Mamun
Mamun

Reputation: 68933

You have some extra code. Simply check the value length of the fields:

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>

Though I personally prefer the following approach (without 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>

Upvotes: 1

brk
brk

Reputation: 50291

You can use the required attribute and checkValidity() method. Also you need a button to submit a form. There is no need of setInterval here

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>

Upvotes: 0

Related Questions