html - How to validate a text input based on radio selected and if visible

Question

I have a set of radio. If I select Value=1 the show custom_281 text field and if it is visible then should have some value before proceeding, if empty show an alert. If selected value=2 then hide custom_281 and not mandatory to fill in.

I cant seem to validate the text field and show the alert. Here’s my html And jquery. Any help would be appreciated. Thanks

<div id="editrow-custom_280" class="crm-section editrow_custom_280-section form-item">
    <div class="content">
        <input type="radio" id="QFID_1_custom_280" name="custom_280" class="required crm-form-radio" value="1">
        <input type="radio" id="QFID_2_custom_280" name="custom_280" class="required crm-form-radio" value="2">
    </div>
</div>

<div id="editrow-custom_281" class="crm-section editrow_custom_281-section form-item" novalidate="novalidate" style="display: block;">
    <div class="content">
        <input id="custom_281" type="text" name="custom_281" maxlength="255" class="crm-form-text" placeholder="Enter Number ">
    </div>
</div>


CRM.$(function($) {
    showNumber();
    function showNumber() {
        $('input[name=custom_280]').change(showNumber);
        if ($('input[name=custom_280][value=1]').is(':checked')) {
            $('div#editrow-custom_281').slideDown('slow').validate({ignore:':not(:visible)'});
        }
        else {
            $('div#editrow-custom_281').slideUp('slow');
        }
    }
});

Answer 1

You can check if the radio button checked value is 1 if yes check if the input is not empty depending on this show you message.

Demo Code :

showNumber();

function showNumber() {
  $('input[name=custom_280]').change(showNumber);
  if ($('input[name=custom_280][value=1]').is(':checked')) {
    $('div#editrow-custom_281 input').val('')
    $('div#editrow-custom_281').slideDown('slow')
  } else {
    $('div#editrow-custom_281').slideUp('slow');
  }
}
//on click of proceed btn
$("#proceed").on("click", function() {
  //check if the checked valeu is 1
  if ($('input[name=custom_280]:checked').val() === '1') {
    if (!$('div#editrow-custom_281 input').val()) {
      $('div#editrow-custom_281 input').focus()
      console.log("Please fill") //empty
    } else {
      console.log("All good")
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="crm-section editrow_custom_280-section form-item" id="editrow-custom_280">
  <div class="content">
    <input class=" required crm-form-radio" value="1" type="radio" id="QFID_1_custom_280" name="custom_280">
    <input class=" required crm-form-radio" value="2" type="radio" id="QFID_2_custom_280" name="custom_280">
  </div>
</div>

<div class="crm-section editrow_custom_281-section form-item" id="editrow-custom_281" novalidate="novalidate" style="display: block;">
  <div class="content">
    <input maxlength="255" name="custom_281" type="text" id="custom_281" class="crm-form-text" placeholder=" Enter Number ">
  </div>
</div>

<button id="proceed">Proceed</button>