Setting attributes with jQuery in dynamic PHP form - Not Working

user_12937001 0
Viewed 54

I am stuck in setting up the attribute using jQuery The task is quite simple, I am setting the data-error attribute to field the required attribute is working perfectly fine, but data-error attribute is not working and not showing error where nothing is selected. tried many ways, but it is not working.

I want to show an error where it selects Yes and does not select priority dropdown. If it selects no then it show no error and let it submit anyway

$('input[name*=Suitability]').click(function() {
  //check if radio is checked and value is Y
  if ($(this).is(":checked") && $(this).val() == "Y") {
    $(this).closest("tr").find(".ShowPriority").show(); //show
    $(this).closest("tr").find(".Priority").attr('required', '');
    $(this).closest("tr").find(".Priority").attr('data-error', 'This field is required.');

  } else {
    $(this).closest("tr").find('.ShowPriority').hide(); //hide
    $(this).closest("tr").find(".Priority").removeAttr('required', '');
    $(this).closest("tr").find(".Priority").removeAttr('data-error', 'This field is required.');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
  <tr>
    <td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Sr.No</td>
    <td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Topic Name</td>
    <td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="2">Suitability of Business for Pre-Feasibility Study</td>
    <td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="3">Priority for Development of Pre-Feasibility Study</td>
  </tr>

  <tr>
    <td style="min-width:50px;">
      1
    </td>
    <td><input type="text" value="Topic 1" readonly required="required" size="58"></td>
    <input type="hidden" name="FPSTopic[]" value="Data 1" />
    <td style="min-width:50px;text-align:center; font-weight:bold">
      <label>Yes</label><input type="radio" name="Suitability[0]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[0]" value="N" id="NoCheck" required="required" />
    </td>

    <td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
      <select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]">
        <option selected disabled value="">Choose Priority...</option>
        <option value="1">1 - High</option>
        <option value="2">2 - Intermediate</option>
        <option value="3">3 - Low</option>
      </select>
    </td>
  </tr>

  <tr>
    <td style="min-width:50px;">
      2
    </td>
    <td><input type="text" value="Topic 2" readonly required="required" size="58"></td>
    <input type="hidden" name="FPSTopic[]" value="Data 2" />
    <td style="min-width:50px;text-align:center; font-weight:bold">
      <label>Yes</label><input type="radio" name="Suitability[1]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[1]" value="N" id="NoCheck" required="required" />
    </td>

    <td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
      <select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]">
        <option selected disabled value="">Choose Priority...</option>
        <option value="1">1 - High</option>
        <option value="2">2 - Intermediate</option>
        <option value="3">3 - Low</option>
      </select>
    </td>
  </tr>

  <tr>
    <td style="min-width:50px;">
      3
    </td>
    <td><input type="text" value="Topic 3" readonly required="required" size="58"></td>
    <input type="hidden" name="FPSTopic[]" value="Data 3" />
    <td style="min-width:50px;text-align:center; font-weight:bold">
      <label>Yes</label><input type="radio" name="Suitability[2]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[2]" value="N" id="NoCheck" required="required" />
    </td>

    <td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
      <select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]">
        <option selected disabled value="">Choose Priority...</option>
        <option value="1">1 - High</option>
        <option value="2">2 - Intermediate</option>
        <option value="3">3 - Low</option>
      </select>
    </td>
  </tr>


</table>

html jquery javascript
1 Answers

You need to have required on the select. Then you can remove it when you want

$(function() {
  $('input[name*=Suitability]').click(function() {
    //check if radio is checked and value is Y
    const show = $(this).is(":checked") && $(this).val() == "Y";
    $(this).closest("tr").find(".ShowPriority").toggle(show); //show
    $(this).closest("tr").find(".Priority").attr('required', function() { return show });
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />

<form>
  <table class="table table-striped table-bordered table-hover" id="dataTables-example">
    <tr>
      <td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Sr.No</td>
      <td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Topic Name</td>
      <td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="2">Suitability of Business for Pre-Feasibility Study</td>
      <td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="3">Priority for Development of Pre-Feasibility Study</td>
    </tr>

    <tr>
      <td style="min-width:50px;">
        1
      </td>
      <td><input type="text" value="Topic 1" readonly required="required" size="58"></td>
      <input type="hidden" name="FPSTopic[]" value="Data 1" />
      <td style="min-width:50px;text-align:center; font-weight:bold">
        <label>Yes</label><input type="radio" name="Suitability[0]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[0]" value="N" id="NoCheck" required="required" />
      </td>

      <td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
        <select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]" required data-error="This field is required">
          <option selected disabled value="">Choose Priority...</option>
          <option value="1">1 - High</option>
          <option value="2">2 - Intermediate</option>
          <option value="3">3 - Low</option>
        </select>
      </td>
    </tr>

    <tr>
      <td style="min-width:50px;">
        2
      </td>
      <td><input type="text" value="Topic 2" readonly required="required" size="58"></td>
      <input type="hidden" name="FPSTopic[]" value="Data 2" />
      <td style="min-width:50px;text-align:center; font-weight:bold">
        <label>Yes</label><input type="radio" name="Suitability[1]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[1]" value="N" id="NoCheck" required="required" />
      </td>

      <td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
        <select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]" required data-error="This field is required" <option selected disabled value="">Choose Priority...</option>
          <option value="1">1 - High</option>
          <option value="2">2 - Intermediate</option>
          <option value="3">3 - Low</option>
        </select>
      </td>
    </tr>

    <tr>
      <td style="min-width:50px;">
        3
      </td>
      <td><input type="text" value="Topic 3" readonly required="required" size="58"></td>
      <input type="hidden" name="FPSTopic[]" value="Data 3" />
      <td style="min-width:50px;text-align:center; font-weight:bold">
        <label>Yes</label><input type="radio" name="Suitability[2]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[2]" value="N" id="NoCheck" required="required" />
      </td>

      <td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
        <select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]" required data-error="This field is required" <option selected disabled value="">Choose Priority...</option>
          <option value="1">1 - High</option>
          <option value="2">2 - Intermediate</option>
          <option value="3">3 - Low</option>
        </select>
      </td>
    </tr>


  </table>
  <input type="submit">
</form>

user_2957830
Related