Adding password validation with jQuery validation with different cases

Question

I managed to create a jQuery validation for a password field this far. My question is how I edit this to get an error alert in each custom case like 'You need to add a Capital Letter', 'You need to add a number' etc. My Code:

var value=$("#password_reg").val();

$.validator.addMethod("pwcheck",function(value) {
     return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) && /[a-z]/.test(value) && /\d/.test(value) && /[A-Z]/.test(value);
});

$('#signup-form').validate({    
    rules: {
        password:{
            minlength: 6,
            maxlength: 30,
            required: true,
            pwcheck: true   
        },
        confirmPassword:{
            equalTo: "#password_reg",
        },
    },
    messages: {
       password: {
           pwcheck: "Password is not strong enough"
       }     
    },
    highlight: function(element) {
        var id_attr = "#" + $( element ).attr("id") + "1";
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');  
        $('.form-group').css('margin-bottom', '5px');
        $('.form').css('padding', '30px 40px');
        $('.tab-group').css('margin', '0 0 25px 0');
        $('.help-block').css('display', '');
    },
    unhighlight: function(element) {
        var id_attr = "#" + $( element ).attr("id") + "1";
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');         
    },
    errorElement: 'span',
        errorClass: 'validate_cus',
        errorPlacement: function(error, element) {
            x=element.length;
            if(element.length) {
                error.insertAfter(element);
            } else {
            error.insertAfter(element);
            }
        }
 });

Please check my fiddle

n4m31ess_c0d3r · Accepted Answer · 2016-08-31 11:32:37Z

You will need to divide the logic in your pwcheck into separate validator methods. Below is a prototype of the same:

var value = $("#password_reg").val();

$.validator.addMethod("checklower", function(value) {
  return /[a-z]/.test(value);
});
$.validator.addMethod("checkupper", function(value) {
  return /[A-Z]/.test(value);
});
$.validator.addMethod("checkdigit", function(value) {
  return /[0-9]/.test(value);
});
$.validator.addMethod("pwcheck", function(value) {
  return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) && /[a-z]/.test(value) && /\d/.test(value) && /[A-Z]/.test(value);
});

$('#signup-form').validate({
  rules: {
    password: {
      minlength: 6,
      maxlength: 30,
      required: true,
      //pwcheck: true,
      checklower: true,
      checkupper: true,
      checkdigit: true
    },
    confirmPassword: {
      equalTo: "#passwd_reg",
    },
  },
  messages: {
    password: {
      pwcheck: "Password is not strong enough",
      checklower: "Need atleast 1 lowercase alphabet",
      checkupper: "Need atleast 1 uppercase alphabet",
      checkdigit: "Need atleast 1 digit"
    }
  },
  highlight: function(element) {
    var id_attr = "#" + $(element).attr("id") + "1";
    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');
    $('.form-group').css('margin-bottom', '5px');
    $('.form').css('padding', '30px 40px');
    $('.tab-group').css('margin', '0 0 25px 0');
    $('.help-block').css('display', '');
  },
  unhighlight: function(element) {
    var id_attr = "#" + $(element).attr("id") + "1";
    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');
    $('#confirmPassword').attr('disabled', false);
  },
  errorElement: 'span',
  errorClass: 'validate_cus',
  errorPlacement: function(error, element) {
    x = element.length;
    if (element.length) {
      error.insertAfter(element);
    } else {
      error.insertAfter(element);
    }
  }

});

.has-feedback .form-control-feedback {
  top: 33px;
}

.validate_cus {
  color: #a94442;
  font-size: small;
}

label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: 700;
}

.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}

.field-wrap {
  position: relative;
  margin-bottom: 20px;
}

input,
textarea {
  font-size: 18px;
  display: block;
  height: 100%;
  width: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #545f58;
  border-radius: 6px;
  -webkit-transition: border-color .25s ease, box-shadow .25s ease;
  transition: border-color .25s ease, box-shadow .25s ease;
}
input:disabled {
    background: #eee;
}

.button:hover,
.button:focus {
  background: #0b9444;
}

.button-block {
  display: block;
  width: 50%;
}

.button {
  border: 0;
  outline: none;
  border-radius: 20px;
  padding: 15px 0;
  font-size: 1.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #187143;
  color: #ffffff;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}

#signup-form {
  padding: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>

<form id="signup-form" action="login" method="post">
  <div class="top-row">
    <div class="form-group has-feedback field-wrap">
      <label id="lbl_paswd" class="control-label" for="password">
        Password
        <span class="req">*
        </span>
      </label>
      <input type="password" name="password" id="password_reg" class="" required autocomplete="off" />
      <span class="glyphicon form-control-feedback" id="password_reg1">
      </span>
    </div>
    <div class="form-group has-feedback field-wrap">
      <label class="control-label" for="confirmPassword">
        Confirm Password
        <span class="req">*
        </span>
      </label>
      <input type="password" name="confirmPassword" id="confirmPassword" class="" disabled required autocomplete="off" />
      <span class="glyphicon form-control-feedback" id="confirmPassword1">
      </span>
    </div>
  </div>
  <button type="submit" class="button button-block">SIGN UP
  </button>
</form>

one question can i do something like make confirm password field inactive until enter some value to password field?
Use the disabled attribute of input in HTML and later in your JS remove this attribute. I have tweaked the snippet a little for the same, confirm password will now be active only after the password field is validated ok once.
hi i need to remove the confirm password field if user changes password can i achieve this inside here without another js function.

Fxc Jahid · Accepted Answer · 2020-09-30 16:53:12Z

2

code:

    $.validator.addMethod("strongePassword", function(value) {
        return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) && /[a-z]/.test(value) && /\d/.test(value) && /[A-Z]/.test(value);
    },"The password must contain at least 1 number, at least 1 lower case letter, and at least 1 upper case letter");

Uses to :

  rules: { 
        password: {
                    required: !0,
                    strongePassword: true
                 },
     }

This worked for me.

answered Sep 30, 2020 at 16:53

Fxc Jahid

232 bronze badges

1 Comment

fcdt Over a year ago

Before you paste this in even more locations, please take the time to read Is it acceptable to add a duplicate answer to several questions?.

Collectives™ on Stack Overflow

Adding password validation with jQuery validation with different cases

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related