How to activate required on input depending on choosen value in other input field with jquery/ajax?

Admin 1
Viewed 28

I have a form with 2 radio buttons, that if I choose "Yes", a DIV with aditionally 2 pairs of radio buttons appears, and if yes is choosen in the first, I need required set in the 2 new radio button pairs ("Type" and "What to do"). If "Move Number" is choosen in "What to do" radio pair, a second DIV appears with an input field where the user should tell which number to move .. this field then needs required set .. how can I do this dynamically?

Just for info, I use Parsley JS Validator to validate the fields.

Here is a minimalistic piece of the code:

function CompanyMobileFunction() {
  var x = document.getElementById("CompanyMobile");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}


function CompanyMobileMoveFunction() {
  var x = document.getElementById("MobileMove");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}


function CompanyMobileFunctionClose() {
  var x = document.getElementById("CompanyMobile");
  if (x.style.display === "none") {
    x.style.display = "none";
  } else {
    x.style.display = "none";
  }
}


function CompanyMobileMoveFunctionClose() {
  var x = document.getElementById("MobileMove");
  if (x.style.display === "none") {
    x.style.display = "none";
  } else {
    x.style.display = "none";
  }
}
<table style="width: 550px;">
  <tr>
  <td style="width: 250px;"><b>Mobile phone? (required) :</b></td>
  <td>

    <label class="container">Yes
      <input type="radio" id="CompanyMobileYES" name="CompanyMobile" onclick="CompanyMobileFunction()" value="yes">
      <span class="radio"></span>
    </label>

  </td>
  <td>

    <label class="container">No
      <input type="radio" id="CompanyMobileNO" name="CompanyMobile" onclick="CompanyMobileFunctionClose()" value="yes">
      <span class="radio"></span>
    </label>                          

  </td>
  </tr>
</table>              



<div id="CompanyMobile" style="display: none;">


<table style="width: 550px;">
  <tr>
  <td style="width: 250px;"><b>Type (required) :</b></td>
  <td>

    <label class="container">iPhone
      <input type="radio" id="iPhone" name="MobileOS" value="iPhone">
      <span class="radio"></span>
    </label>

  </td>
  <td>

    <label class="container">Android
      <input type="radio" id="Android" name="MobileOS" value="Android">
      <span class="radio"></span>
    </label>                          

  </td>
  </tr>
  <tr>
  <td style="width: 250px;"><b>What to do? (required) :</b></td>
  <td>

    <label class="container">New Number
      <input type="radio" id="CompanyMobileMoveNew" name="CompanyMobileMove" onclick="CompanyMobileMoveFunctionClose()" value="newnumber">
      <span class="radio"></span>
    </label>

  </td>
  <td>

    <label class="container">Move Number
      <input type="radio" id="CompanyMobileMoveMove" name="CompanyMobileMove" onclick="CompanyMobileMoveFunction()" value="movenumber">
      <span class="radio"></span>
    </label>                          

  </td>
  </tr>
</table>   


<div id="MobileMove" style="display: none;">

<table style="width: 550px;">
<tr>
<td style="width: 250px;"><b>Number to move (required) :</b></td>
    <td align="left">
    
        <input class="form-control" style="width: 130px;" type="number" id="mobiletomove" name="mobiletomove" minlength="11111111" maxlength="99999999">
        
    </td>
  </tr>
</table>

</div>

html jquery ajax
1 Answers

You can use jQuery, classes, and prop() to do this. Make sure you are removing the required prop even if the input is hidden.

function toggleRequired(){
  
  var isYesChecked = $('#CompanyMobileYES').is(':checked');     
  var isMoveChecked = $('#CompanyMobileMoveMove').is(':checked');  
  
  $('[name="MobileOS"]').prop('required', isYesChecked);
  $('[name="CompanyMobileMove"').prop('required', isYesChecked);     
  
  $('#mobiletomove').prop('required', isMoveChecked); 
}


function toggleHidden(){
  
  var isYesChecked = $('#CompanyMobileYES').is(':checked');     
  var isMoveChecked = $('#CompanyMobileMoveMove').is(':checked');  
  
  $('#CompanyMobile').toggleClass('hidden', !isYesChecked);    
  $('#MobileMove').toggleClass('hidden', !isYesChecked || !isMoveChecked ); 
}




$('[name="CompanyMobile"]').on('change',function () {
  toggleRequired();
  toggleHidden();

} );

$('[name="CompanyMobileMove"]').on('change',function () {
   toggleRequired();
   toggleHidden();

} );
.hidden {
  display: none;
}

input:required::after {
  content: '***';
  margin: 15px;
}

input:required {
  border: 1px solid red;  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<table style="width: 550px;">
  <tr>
    <td style="width: 250px;"><b>Mobile phone? (required) :</b></td>
    <td>

      <label class="container">Yes
        <input id="CompanyMobileYES" name="CompanyMobile" type="radio" value="yes">
        <span class="radio"></span>
      </label>

    </td>
    <td>

      <label class="container">No
        <input id="CompanyMobileNO" name="CompanyMobile" type="radio" value="no">
        <span class="radio"></span>
      </label>

    </td>
  </tr>
</table>


<div class="hidden" id="CompanyMobile">


  <table style="width: 550px;">
    <tr>
      <td style="width: 250px;"><b>Type (required) :</b></td>
      <td>

        <label class="container">iPhone
          <input id="iPhone" name="MobileOS" type="radio" value="iPhone">
          <span class="radio"></span>
        </label>

      </td>
      <td>

        <label class="container">Android
          <input id="Android" name="MobileOS" type="radio" value="Android">
          <span class="radio"></span>
        </label>

      </td>
    </tr>
    <tr>
      <td style="width: 250px;"><b>What to do? (required) :</b></td>
      <td>

        <label class="container">New Number
          <input id="CompanyMobileMoveNew" name="CompanyMobileMove" type="radio" value="newnumber">
          <span class="radio"></span>
        </label>

      </td>
      <td>

        <label class="container">Move Number
          <input id="CompanyMobileMoveMove" name="CompanyMobileMove" type="radio" value="movenumber">
          <span class="radio"></span>
        </label>

      </td>
    </tr>
  </table>
</div>

<div class="hidden" id="MobileMove">

  <table style="width: 550px;">
    <tr>
      <td style="width: 250px;"><b>Number to move (required) :</b></td>
      <td align="left">

        <input class="form-control" id="mobiletomove" maxlength="99999999" minlength="11111111" name="mobiletomove" style="width: 130px;" type="number">

      </td>
    </tr>
  </table>

</div>

user_9099730
Related