Check for empty fields and adding style properties

Question

There is a form with two required fields

<input type="password" id="passsword" />
<input type="password" id="conf_password" />

and submit button Need to implement a simple check 2 fields are blank if one of the fields is empty, the button is not active when entered at least some characters in both fields button should do in css file:

#login_form{
    visibility: hidden;
}
#thanks{
    visibility: visible;
}

Prompt how to implement it in JavaScript or in JQuery?

Answer 1

You need to check both on the keyup event:

The Basic Answer:

$(document).ready(function(){

    $("#password").keyup(function(){
   
        if($(this).val().length > 0 && $("#password_conf").val().length > 0)
            $("#submit").removeAttr("disabled");
        else
            $("#submit").attr("disabled", "disabled");
    
   });
 
    $("#password_conf").keyup(function(){
   
        if($(this).val().length > 0 && $("#password").val().length > 0)
            $("#submit").removeAttr("disabled");
        else
            $("#submit").attr("disabled", "disabled");
    
    });

});

JSFiddle

---

---

Setting a minimum password length:

Furthermore, you can set a minimum password length by using an instance variable:

var minLength = 3;

$(document).ready(function(){

    $("#password").keyup(function(){
   
        if($(this).val().length >= minLength && $("#password_conf").val().length >= minLength)
            $("#submit").removeAttr("disabled");
        else
            $("#submit").attr("disabled", "disabled");
    
   });
 
    $("#password_conf").keyup(function(){
   
        if($(this).val().length >= minLength && $("#password").val().length >= minLength)
            $("#submit").removeAttr("disabled");
        else
            $("#submit").attr("disabled", "disabled");
    
    });

});

Remember that you should always validate lengths server-side as well. Don't rely on JavaScript to do your checking for you.

---

---

Editing CSS with jQuery:

You mentioned that you did not know how to modify CSS with jQuery. This is how:

$("selector").css("css-property", "value");

For example:

$("#submit").css("border-color", "blue");

You can also edit multiple properties by wrapping them in brackets:

$("#submit").css({"border-color": "blue", "visibility":"visible"});

---

---

Putting it all together:

If you want to hide the submit button instead of disabling it, while using a minimum password length, do the following:

var minLength = 3;

$(document).ready(function(){

    $("#password").keyup(function(){
   
        if($(this).val().length >= minLength && $("#password_conf").val().length >= minLength)
            $("#submit").css("visibility", "visible");
        else
            $("#submit").css("visibility", "hidden");
    
   });
 
    $("#password_conf").keyup(function(){
   
        if($(this).val().length >= minLength && $("#password").val().length >= minLength)
            $("#submit").css("visibility", "visible");
        else
            $("#submit").css("visibility", "hidden");
    
    });

});

Answer 2

Template;

<form id="test">
    <input type="password" id="passsword" />
    <input type="password" id="conf_password" />
    <input type="submit" value="ok" id="btnSubmit">
</form>

Jquery Code;

$(document).ready(function () {
        $('#test #btnSubmit').attr('disabled', 'disabled');
        $('#test #passsword').keyup(function () {
            if ($(this).val().length > 0 && $('#test #conf_password').val().length > 0) {
                $('#test #btnSubmit').removeAttr('disabled');
            }
        });
        $('#test #conf_password').keyup(function () {
            if ($(this).val().length > 0 && $('#test #passsword').val().length > 0) {
                $('#test #btnSubmit').removeAttr('disabled');
            }
        });
    });

Answer 3

<script src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
<input type="text" class="req" id="pass" />
<input type="text" class="req" id=c_pass" />
<input type="submit" class="btn" id="button" onClick='alert("hi");' disabled/>
<script>

$(function (){
$('.req').change(function(){
    if ($('#pass').val() == '' || $('#c_pass').val() == '')
        {
            $('#button').attr('disabled',true);
        }
    else
        {
            $('#button').attr('disabled',false);
        }
});
});

</script>