Jquery - validate textbox based on checkbox

deeflor
August 10, 2023
225 views
2 votes
3 Answers

I want to validate a value only when a checkbox is checked. I am able to get the validation running but if the checkbox is unchecked, the validation still runs.

Here is my code:

$("#personal_deliver_same").on("click", function(){
  var check = $("#personal_deliver_same").is(':checked');
  if(check){
    $("#input-payment-postcode").keyup(function (){ 
      if($("#input-payment-postcode").val().length > 5) {
        alert("in2");
      }
    });     
  }
  else{
    alert("out2");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="control-label" for="input-payment-postcode">Post Code</label>
<input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
<br>
<input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
<label>My Checkbox</label>

Tags: javascript jquery

Answers

I think this will be what you want.

It will store the value of the checkbox in a variable
it will monitor the checkbox’s input event instead of just click. Now when the value changes the event will occur
It will monitor the input event of the text box for changes. If a change happens and the box is checked it will show you the output
When the box is checked, it will also fire the event on the textbox

const $checkbox = $("#personal_deliver_same");
const $txtPostCode = $("#input-payment-postcode");
let isChecked = $checkbox.is(":checked");

$checkbox.on("input", function(){
  isChecked = $checkbox.is(":checked");
  console.log("Checkbox changed:", isChecked);
  
  if(isChecked){
    $txtPostCode.trigger('input');
  }
});

$txtPostCode.on('input', function (){ 
  if(isChecked) {
    if($txtPostCode.val().length > 5){
      console.log("post code length is more than 5");
    } else {
      console.log("post code length is 5 or less");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="control-label" for="input-payment-postcode">Post Code</label>
<input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
<br>
<input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
<label for="personal_deliver_same">My Checkbox</label>

You’re binding your event handlers in the wrong sequence and not checking it when you need to. Try this way:

var check = false;

$("#personal_deliver_same").on("click", function() {
  check = $("#personal_deliver_same").is(':checked');
});


$("#input-payment-postcode").keyup(function() {
  if (check && $("#input-payment-postcode").val().length > 5) {
    console.log("in2");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="control-label" for="input-payment-postcode">Post Code</label>
<input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
<br>
<input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
<label>My Checkbox</label>

<label for="postcode">Post Code</label>
<input id="postcode" />

<input id="validate" type="checkbox">
<label for="validate">Validate Post Code?</label>

<script>
  $('#validate').on('click',() => shouldValidate() )
  $('#postcode').on('keyup',() => shouldValidate() )

  function shouldValidate(){
    if( $('#validate').is(':checked') )
      // Validate
    else
      // Don't Validate
  }
</script>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – validate textbox based on checkbox

Answers