Jquery validation if checkbox is checked condition?

Question

I have a form, if checkbox is checked, I will allow user to change their password, otherwise do not allow the user to change their password.

How can I do it?

$(function() {

  var passworderror = "Password should be alphanumeric, 1 uppercase, 1 lowercase and 6 to 20 characters long.";


  $.validator.addMethod("pwcheckspechars", function(value) {
    return /[!@#$Â£%^&*()_=\[\]{};':"\\|,.<>\/?+-]/.test(value)
  }, passworderror);

  $.validator.addMethod("pwchecklowercase", function(value) {
    return /[a-z]/.test(value) // has a lowercase letter
  }, passworderror);
  $.validator.addMethod("pwcheckuppercase", function(value) {
    return /[A-Z]/.test(value) // has an uppercase letter
  }, passworderror);
  $.validator.addMethod("pwchecknumber", function(value) {
    return /\d/.test(value) // has a digit
  }, passworderror);


  $('.myform').validate({
    rules: {
      changepsw: {
        required: true
      },
      newpassword: {
        required: true
      }
    }

  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="myform">
  <input type="checkbox" id="changepsw" name="changepsw">
  <br/>
  <label for="newpassword">New Password</label>
  <input type="text" name="newpassword" id="newpassword">
  <br/>
  <input type="submit" value="submit">
</form>

if ($("#changepsw").is(":checked")) doValidationAndNextSteps(); — CSSBurner, Jun 04 '18 at 15:33
You want validation based on checkbox. It’s been answered many times already. — Sparky, Jun 04 '18 at 18:59

score 1 · Answer 1 · answered Jun 04 '18 at 16:01

You could try to enable/disable the form when the checkbox is clicked. Then is checked, enable the validation.

var passworderror = "Password should be alphanumeric, 1 uppercase, 1 lowercase and 6 to 20 characters long.";

$.validator.addMethod("pwcheckspechars", function (value) {
  return /[!@#$Â£%^&*()_=\[\]{};':"\\|,.<>\/?+-]/.test(value)
}, passworderror);

$.validator.addMethod("pwchecklowercase", function (value) {
   return /[a-z]/.test(value) // has a lowercase letter
}, passworderror);

$.validator.addMethod("pwcheckuppercase", function (value) {
  return /[A-Z]/.test(value) // has an uppercase letter
}, passworderror);

$.validator.addMethod("pwchecknumber", function (value) {
  return /\d/.test(value) // has a digit
}, passworderror);

var validator = $('.myform').validate();

$('#changepsw').click(function() {
  if($(this).is(':checked')) {
    $('#newpassword').attr('disabled', false).rules('add', {
      required: true,
      pwcheckspechars: true,
      pwchecklowercase: true,
      pwcheckuppercase: true,
      pwchecknumber: true
     
    });
    $('input[type="submit"]').attr('disabled', false);
  } else {
    validator.resetForm()
    $('#newpassword').attr('disabled', true).rules('remove');
    $('input[type="submit"]').attr('disabled', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
<form action="" method="post" class="myform">
    <input type="checkbox" id="changepsw" name="changepsw">
    <br/>
    <label for="newpassword">New Password</label>
    <input type="text" name="newpassword"  id="newpassword" disabled>
    <br/>
    <input type="submit" value="submit" disabled>
  </form>

score 0 · Answer 2 · answered Jun 04 '18 at 15:44

Try this method

$(function(){

var passworderror = "Password should be alphanumeric, 1 uppercase, 1 lowercase and 6 to 20 characters long.";


            $.validator.addMethod("pwcheckspechars", function (value) {
             if($("#changepsw").is(':checked')){  
                return /[!@#$Â£%^&*()_=\[\]{};':"\\|,.<>\/?+-]/.test(value)
              }else{
                return true;
              }
            }, passworderror);

            $.validator.addMethod("pwchecklowercase", function (value) {
                 if($("#changepsw").is(':checked')){
                   return /[a-z]/.test(value)
                 }else{
                  return true;
                 }
            }, passworderror);
            $.validator.addMethod("pwcheckuppercase", function (value) {
                 if($("#changepsw").is(':checked')){
                return /[A-Z]/.test(value) // has an uppercase letter
              }else{
                return true;
              }
            }, passworderror);
            $.validator.addMethod("pwchecknumber", function (value) {
            if($("#changepsw").is(':checked')){
                return /\d/.test(value) // has a digit
              }else{
                return true;
              }

            }, passworderror);


  $('.myform').validate({
      rules:{
        changepsw: {
          required:true
        },
        newpassword:{
             required:function(){
              return "#changepsw:checked"
             },
            pwcheckspechars :true,
            pwchecklowercase:true,
            pwcheckuppercase:true,
            pwchecknumber:true

        }
      }

    });
})

Jquery validation if checkbox is checked condition?

2 Answers2