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

Posted 2023-03-05

【中文标题】如何根据选定的无线电验证文本输入以及是不是可见

【英文标题】：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');
        
    
);

【参考方案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>