Applying jQuery only to some input fields, not all of the same type

Question

I have the following Javascript:

$(document).ready(function() {
    if($('input[type=password]').getAttribute("id") == "password_form") {
        $('input[type=password]').keyup(function() {
            var pswd = $(this).val();
            //validate length
            if(pswd.length < 8) {
                $('#length').removeClass('valid').addClass('invalid');
            } else {
                $('#length').removeClass('invalid').addClass('valid');
            }
            //validate letter
            if ( pswd.match(/[A-z]/) ) {
                $('#letter').removeClass('invalid').addClass('valid');
            } else {
                $('#letter').removeClass('valid').addClass('invalid');
            }
            //validate capital letter
            if ( pswd.match(/[A-Z]/) ) {
                $('#capital').removeClass('invalid').addClass('valid');
            } else {
                $('#capital').removeClass('valid').addClass('invalid');
            }
            //validate number
            if ( pswd.match(/\d/) ) {
                $('#number').removeClass('invalid').addClass('valid');
            } else {
                $('#number').removeClass('valid').addClass('invalid');
            }
        }).focus(function() {
            $('#password_info').show();
        }).blur(function() {
            $('#password_info').hide();
        });
    } else {
        var pswd = $(this).val();
        var pswd2 = $(document).getElementById("password_form").val();
        $('input[type=password]').keyup(function() {
            if(pswd != pswd2) {
                $('same').removeClass('valid').addClass('invalid');
            } else {
                $('same').removeClass('invalid').addClass('valid');
            }
        }).focus(function() {
            $('#password_info_re-enter').show();
        }).blur(function() {
            $('#password_info_re-enter').hide();
        });
    }
});

I have two password fields since one is the first one you write your password in and the second one is for verification in a sign-up form. But I want to show password requirements on the first password box but a different box on the verification box showing whether the password matches or not.

So to do this I tried to see if I could find the ID of one of them so that the first part only applied to the first one and not the second one.

How would I do this?

You do that already $('input[type=password]').getAttribute("id") == "password_form" what is the question ? — Zakaria Acharki
– Zakaria Acharki, Commented Sep 20, 2015 at 17:44
just select the first one: $('input[type=password]:eq(0)') — Joshua K
– Joshua K, Commented Sep 20, 2015 at 17:44
If you know their IDs why don't you use directly them in your code instead of input type — Matteo Pariset
– Matteo Pariset, Commented Sep 20, 2015 at 17:51
.getAttribute("id") isn't a jQuery method and will throw error ...use attr('id') or $('input[type=password]')[0].getAttribute("id") and keep in mind using id as the selector makes more sense as the generic one will only get value of first matching selector — charlietfl
– charlietfl, Commented Sep 20, 2015 at 17:52

charlietfl · Accepted Answer · 2015-09-20 18:09:35Z

1

I would suggest you change the approach to targeting the password elements as a collection using one event handler and moving your business logic inside that handler along the lines of:

var $pwds = $('input[type=password]').keyup(function() {
      // define the values and elements
      var isMainField = this.id === 'password_form',
          $otherField = $pwds.not(this),
          mainPwd = isMainField ? this.value : $otherField.val(),
          secondPwd = isMainField ? $otherField.val() : this.value ;

       // validation stuff
       if( isMainfield){
           // code for main
       }else{
           //code for secondary
       }    
});

answered Sep 20, 2015 at 18:09

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Applying jQuery only to some input fields, not all of the same type

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related