如何根据选定的无线电验证文本输入以及是否可见答案

【问题标题】：How to validate a text input based on radio selected and if visible如何根据选定的无线电验证文本输入以及是否可见
【发布时间】：2021-04-24 06:20:14
【问题描述】：

我有一套收音机。如果我选择 Value=1，则显示 custom_281 文本字段，如果它可见，那么在继续之前应该有一些值，如果为空则显示警报。如果选择 value=2 则隐藏 custom_281 且不强制填写。

我似乎无法验证文本字段并显示警报。这是我的 html 和 jquery。任何帮助，将不胜感激。谢谢

<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');
        }
    }
});

【问题讨论】：

标签： html jquery validation radio-button

【解决方案1】：

您可以检查单选按钮的检查值是否为1，如果是，请检查input 是否不为空，具体取决于此显示消息。

演示代码：

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>

【讨论】：