user3744731 user3744731 - 1 month ago 5
CSS Question

Call javascript/jquery function only when variable (boolean) changes

Currently my project contains a login form which checks if the user has input 3 or more characters in the user name input and 6 or more in the password input.

When the username contains 3 or more characters it sets a variable as true (default false), the same goes for the password. Only when both of them are true the login button should become available. Getting it disabled or not is not the problem, I want the color changed. When both are false or one of them is true it gets a black rgba value and when both are true it gets a greenish rgba color.

The code checks the input fields after every change and Because of this it performs the function that changes the css multiple times. This spams the css and makes the purpose of the code fail.

I'm out of ideas (and energy, it's 2:08 AM here) just wanted to know if there is any solution to my problem.

My code is down below.

var sheet = document.styleSheets[0];
var un = document.getElementById('un');
var pw = document.getElementById('pw');
var unCheck = false;
var pwCheck = false;
var bCheck = false;

$('#un').bind('input', function() {
una = un.value;
if (/^\s*$/.test(una)){
//input is empty or contains white space
}
else{

//input contains character
if(una.length >= 3)
{
//input contains 3 characters or more
unCheck = true;
}
else
{
unCheck = false;
}
checkUnPw();
}
})

$('#pw').bind('input', function() {
pwo = pw.value;
if (/^\s*$/.test(pwo)){
//input is empty or contains white space
}
else{
//input contains character

if(pwo.length >= 6)
{
//input contains 6 characters or more
pwCheck = true;
}
else
{
pwCheck = false;
}
checkUnPw();
}
})

function checkUnPw() {
if(unCheck == true && pwCheck == true)
{
sheet.insertRule(".box button { background: rgba(46,204,113,1)!important; }", 1);
document.getElementById("loginButton").disabled = false;
}
else
{
sheet.insertRule(".box button { background: rgba(0,0,0,0.05)!important; }", 1);
document.getElementById("loginButton").disabled = true;
}
}

Answer

You could use jQuery in order to achieve this. I used Bootstrap to make it pretty.

JS Code:

$(document).ready(function (){
    validate();
    $('#un, #pw').keyup(validate);
});

function validate(){
    if ($('#un').val().length   >=   3   &&
        $('#pw').val().length  >=   6) {
        $("#loginButton").prop("disabled", false);
        $("#loginButton").css("background", "rgba(46,204,113,1)");

    }
    else {
        $("#loginButton").prop("disabled", true);
        $("#loginButton").css("background", "rgba(0,0,0,0.05)");

    }
}

I used "KeyUp" event to check the username (minimum 3 characters) and password (minimum 6 characters)

The validate function is the one checks for the base conditions.

HTML Code:

<div class="container">

      <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="un" class="sr-only">User Name</label>
        <input type="email" id="un" class="form-control" placeholder="User Name" required autofocus>
        <label for="pw" class="sr-only">Password</label>
        <input type="password" id="pw" class="form-control" placeholder="Password" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button id="loginButton" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>

    </div>

CSS Code:

body {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #eee;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Here is the JS Fiddle: https://jsfiddle.net/Manoj85/wnw4j27u/

Hope this helps.