You are viewing limited content. For full access, please sign in.

Discussion

Discussion

Compare two field strings for passwords

Forms
Updated September 7, 2017
posted on September 1, 2017

I have the field for the new password reading the regular expressions fine.

But for some reason the re-enter new password field is not doing a compare.

Submit button should be hidden until compare comes back true.  Otherwise remains hidden.  If the passwords don't match, the message should come back if passwords not equal are true.

Two Fields were used:

field 1 class: pwd

field 2 class: repwd



$(document).ready(function () {
  $('input.Submit').hide();
  
   $('.repwd input').on('blur', function() {
    var password = document.getElementById(".pwd").value;
    var repassword = document.getElementById(".repwd").value; 
     
      if (password != repassword){
        $('<p>Does not Match Password.</p>').insertAfter('.repwd');
        $('input.Submit').hide();
      }
      else{
      	$('input.Submit').show();
      }  
     });
  
  $('.pwd input').on('blur', function() {
    var minMaxLength = /^[\s\S]{8,30}$/;
    var upper = /[A-Z]/;
    var lower = /[a-z]/;
    var number = /[0-9]/;
    var special = /[^A-Za-z0-9]/;
    var count = 0;
    
    $('p.complexityWarning').remove();
    $('p.lengthWarning').remove();
    
    if (minMaxLength.test($(this).val())) {
      $('p.lengthWarning').remove();
      if (upper.test($(this).val())) count++;
      if (lower.test($(this).val())) count++;
      if (number.test($(this).val())) count++;
      if (special.test($(this).val())) count++;
    
      if (count < 3) {
        $('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd');
       // $('.Submit').attr('disabled', true);
      } else {
        $('p.complexityWarning').remove();
       // $('.Submit').removeAttr('disabled');
      }
    } else {
      if (upper.test($(this).val())) count++;
      if (lower.test($(this).val())) count++;
      if (number.test($(this).val())) count++;
      if (special.test($(this).val())) count++;
    
      if (count < 3) {
        $('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd');
      } else {
        $('p.complexityWarning').remove();
      }
      $('<p class="lengthWarning">The password is not between 8 and 30 characters.</p>').insertAfter('.pwd');
     // $('.Submit').attr('disabled', true);
    }
    });
  
  


      
});

 

0 0
replied on September 1, 2017 • Show version history

That looks to have solved the issue with the strings but for some reason after entering the field2 it does not update and run the else statement.  If it found true to get into the if statement, is 'blur' the wrong method to use to update this function?

    $('.repwd input').on('blur', function() {
    var password = $(".pwd input").val();
    var repassword = $(".repwd").val(); 
         $('p.matchWarning').remove();
     
      if (password != repassword){
        $('<p class="matchWarning">Does not Match Password.</p>').insertAfter('.repwd');
        $('input.Submit').hide();
      }
      else{
          $('input.Submit').show();
        $('p.matchWarning').remove();
      }  
     });
  

 

0 0
View 9 previous replies
replied on September 1, 2017

The "blur" and "change" only fire after the field loses focus. If you want it to fire immediately after the match is detected, without clicking on another field, you'll want to use "keyup" instead.

However, that is not your issue. You left out the input selector where you are grabbing the value of repassword. It should be $(".repwd input").val();

1 0
replied on September 1, 2017

I feel like keyup will work.  But the variables within the function must not be updating.  Even on blur if I click on and off the field it should run the function correctly.  Yet the matching strings isn't coming back as true which would run the Else statement.

0 0
replied on September 1, 2017

Like I was saying, your code is not comparing the correct values at the moment.

    var password = $(".pwd input").val();
    var repassword = $(".repwd").val(); // This is not retrieving the field value

You need to change it to:

    var password = $(".pwd input").val();
    var repassword = $(".repwd input").val(); //input was missing

 

1 0
replied on September 1, 2017

Wow did my eyes deceive me?  Yes, yes they did.  Thank you much!

0 0
replied on September 1, 2017

No problem! When you have the chance, I highly recommend playing around with the custom validation. I think it would work really well in your situation.

1 0
replied on September 7, 2017

I have done some rework to this and I have been running into issues again.  Possible eye test is needed:

new password CSS= 'pwd'

re-enter password CDD= 'repwd'

 

The javascript should be posting back warnings below the New Password field

and the hidden section is showing the current values being pulled back for testing.  Yet non of my IF/ELSE conditions are being run.

This image below the password!=repassword.

 

 

$(document).ready(function () {
  	$('.Submit').hide();
  	$('[id="lookup2452"]').text("Verify Identity");
  
//Hide Verify User Warning Message  
$('#q2 input').change(function(){
	if($('#q2 input').val() == ""){

	 	}
  	else{
	$('#q10').hide();
	} 
});   
  
	$('.pwd input').on('keyup', function() {
    	//Initilize Variables
    	var minMaxLength = /^[\s\S]{8,30}$/;
    	var upper = /[A-Z]/;
    	var lower = /[a-z]/;
    	var number = /[0-9]/;
    	var special = /[!@#$%^&*]/;
    	var count = 0;
    	var password = $(".pwd input").val();
    	var repassword = $(".repwd input").val();
        //Remove Looped Warnings
    	$('p.complexityWarning').remove();
    	$('p.lengthWarning').remove();
  		$('p.matchWarning').remove();
   
        if (upper.test($(this).val())) count++;
        if (lower.test($(this).val())) count++;
        if (number.test($(this).val())) count++;
        if (special.test($(this).val())) count++;
      	
        $('.countcheck input').val(count);
      	$('.pass input').val(password);
      	$('.reenterpass input').val(repassword);
      	$('.passlength input').val(password.length);
      
      
    if((password = repassword) && (count = 4) && (password.length >= 8)){
    	('input.Submit').show();   
    }else if((password = repassword) && (count = 4) && (password.length < 8)){
    	('input.Submit').hide();
      	$('<p class="lengthWarning">The password is not between 8 and 30 characters.</p>').insertAfter('.pwd');
    }else if((password = repassword) && (count != 4) && (password.length < 8)){
    	('input.Submit').hide();
      	$('<p class="lengthWarning">The password is not between 8 and 30 characters.</p>').insertAfter('.pwd');
  		$('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd'); 
    }else if((password = repassword) && (count != 4) && (password.length >= 8)){
    	('input.Submit').hide();
  		$('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd');     	  
    }else if((password != repassword) && (count = 4) && (password.length >= 8)){
    	('input.Submit').hide();
  		$('<p class="matchWarning">Does not Match Password.</p>').insertAfter('.pwd');      
    }else if((password != repassword) && (count = 4) && (password.length < 8)){
    	('input.Submit').hide();
      	$('<p class="lengthWarning">The password is not between 8 and 30 characters.</p>').insertAfter('.pwd');
  		$('<p class="matchWarning">Does not Match Password.</p>').insertAfter('.pwd');        
    }else if((password != repassword) && (count != 4) && (password.length >= 8)){
    	('input.Submit').hide();
  		$('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd'); 
  		$('<p class="matchWarning">Does not Match Password.</p>').insertAfter('.pwd');       
    }else{
    	('input.Submit').hide();
  		$('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd'); 
  		$('<p class="matchWarning">Does not Match Password.</p>').insertAfter('.pwd')
        $('<p class="lengthWarning">The password is not between 8 and 30 characters.</p>').insertAfter('.pwd');
    }                         
      
   });
  
});

 

0 0
replied on September 7, 2017 • Show version history

When evaluating for equality, your expressions should have two equal signs not one.

For example, to check if X equals Y in an "IF" you need to put "X == Y" not "X = Y"

1 0
replied on September 7, 2017

I've had it originally to that as well and it did not run correctly as expected:

    if((password == repassword) && (count == 4) && (password.length >= 8)){
    	('input.Submit').show();   
    }else if((password == repassword) && (count == 4) && (password.length < 8)){
    	('input.Submit').hide();
      	$('<p class="lengthWarning">The password is not between 8 and 30 characters.</p>').insertAfter('.pwd');
    }else if((password == repassword) && (count != 4) && (password.length < 8)){
    	('input.Submit').hide();
      	$('<p class="lengthWarning">The password is not between 8 and 30 characters.</p>').insertAfter('.pwd');
  		$('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd'); 
    }else if((password == repassword) && (count != 4) && (password.length >= 8)){
    	('input.Submit').hide();
  		$('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd');     	  
    }else if((password != repassword) && (count == 4) && (password.length >= 8)){
    	('input.Submit').hide();
  		$('<p class="matchWarning">Does not Match Password.</p>').insertAfter('.pwd');      
    }else if((password != repassword) && (count == 4) && (password.length < 8)){
    	('input.Submit').hide();
      	$('<p class="lengthWarning">The password is not between 8 and 30 characters.</p>').insertAfter('.pwd');
  		$('<p class="matchWarning">Does not Match Password.</p>').insertAfter('.pwd');        
    }else if((password != repassword) && (count != 4) && (password.length >= 8)){
    	('input.Submit').hide();
  		$('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd'); 
  		$('<p class="matchWarning">Does not Match Password.</p>').insertAfter('.pwd');       
    }else{
    	('input.Submit').hide();
  		$('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd'); 
  		$('<p class="matchWarning">Does not Match Password.</p>').insertAfter('.pwd')
        $('<p class="lengthWarning">The password is not between 8 and 30 characters.</p>').insertAfter('.pwd');
    }

 

0 0
replied on September 7, 2017

Is the event firing at all? If so, are you seeing any errors in the console? There's a significant amount of change here so it is impossible to determine the problem without more information. If you had it working before, why make such drastic changes?

0 0
replied on September 7, 2017 • Show version history

The event has to be firing because it is populating the hidden field values. I made this change to cover all cases. It wasn't 100% and there were loopholes. I don't see any errors in the console no. And based on those values being populated. It doesn't make send that it would not run the proper statement in this list.

0 0
replied on September 7, 2017 • Show version history

You have additional syntax errors. You don't have the $ in front of your ('input.Submit').hide(); and ('input.Submit').show(); elements.

Here's code that works for me

$('.pwd input, .repwd input').on('keyup', function() {
    	//Initilize Variables
    	var minMaxLength = /^[\s\S]{8,30}$/;
    	var upper = /[A-Z]/;
    	var lower = /[a-z]/;
    	var number = /[0-9]/;
    	var special = /[!@#$%^&*]/;
    	var count = 0;
    	var password = $(".pwd input").val();
    	var repassword = $(".repwd input").val();
        //Remove Looped Warnings
    	$('p.complexityWarning').remove();
    	$('p.lengthWarning').remove();
  		$('p.matchWarning').remove();
    $('.Submit').hide();
   
        if (upper.test($(this).val())) count++;
        if (lower.test($(this).val())) count++;
        if (number.test($(this).val())) count++;
        if (special.test($(this).val())) count++;
      	
        $('.countcheck input').val(count);
      	$('.pass input').val(password);
      	$('.reenterpass input').val(repassword);
      	$('.passlength input').val(password.length);
      
      
    if((password == repassword) && (count == 4) && (password.length >= 8)){
    	$('input.Submit').show();   
    }else if((password == repassword) && (count == 4) && (password.length < 8)){
    	$('input.Submit').hide();
      	$('<p class="lengthWarning">The password is not between 8 and 30 characters.</p>').insertAfter('.pwd');
    }else if((password == repassword) && (count != 4) && (password.length < 8)){
    	$('input.Submit').hide();
      	$('<p class="lengthWarning">The password is not between 8 and 30 characters.</p>').insertAfter('.pwd');
  		$('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd'); 
    }else if((password == repassword) && (count != 4) && (password.length >= 8)){
    	$('input.Submit').hide();
  		$('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd');     	  
    }else if((password != repassword) && (count == 4) && (password.length >= 8)){
    	$('input.Submit').hide();
  		$('<p class="matchWarning">Does not Match Password.</p>').insertAfter('.pwd');      
    }else if((password != repassword) && (count == 4) && (password.length < 8)){
    	$('input.Submit').hide();
      	$('<p class="lengthWarning">The password is not between 8 and 30 characters.</p>').insertAfter('.pwd');
  		$('<p class="matchWarning">Does not Match Password.</p>').insertAfter('.pwd');        
    }else if((password != repassword) && (count != 4) && (password.length >= 8)){
    	$('input.Submit').hide();
  		$('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd'); 
  		$('<p class="matchWarning">Does not Match Password.</p>').insertAfter('.pwd');       
    }else{
    	$('input.Submit').hide();
  		$('<p class="complexityWarning">The password does not meet the complexity requirements.</p>').insertAfter('.pwd'); 
  		$('<p class="matchWarning">Does not Match Password.</p>').insertAfter('.pwd')
        $('<p class="lengthWarning">The password is not between 8 and 30 characters.</p>').insertAfter('.pwd');
    }                         
      
   });

Note that I didn't do an exhaustive check of your logic. I also made it so the function would run whether you were typing in the pwd or repwd fields.

1 0
replied on September 7, 2017

Oh I don't even know how I copied those over without the $.

Thank you for pointing that out!

Yes I knew the logic behind it was sound and something else was off.

If there a good syntax checking website for javascript you could recommend?  Would help me a lot on these without having to turn to Answers first.

Thank you again!

0 0
replied on September 1, 2017 • Show version history

One issue is that you're using document.getElementById but using the custom class, so it won't get the actual values you want to compare.

var password = document.getElementById(".pwd").value;
var repassword = document.getElementById(".repwd").value;

Change that to the following instead

var password = $(".pwd input").val();
var repassword = $(".repwd").val();

Or, you can get the actual ID by looking at the parent element's "q" id value. For example, in the CSS/JavaScript tab if the parent is #q10 the field will be #Field10 (except in cases where you have a collection, table, etc.)

Something else worth looking at is custom error messages. You could create a custom validator for those fields that will work like the built-in validation for regex or required fields.

Then you wouldn't need to hide the submit button because it wouldn't work without passing validation, and you could use the error messages beneath the fields instead of custom field.

Check this post for an example on how to do custom validation. Very handy stuff.

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...