使用 JQuery 验证 RadioBox 的更好方法

Posted 2023-05-09

【中文标题】使用 JQuery 验证 RadioBox 的更好方法

【英文标题】：Better way of validating RadioBoxes with JQuery

【发布时间】：2020-12-07 15:10:55

【问题描述】：

我的网页上有几个单选按钮组，这就是我决定验证这些组的方式

function validateAppRXForm() 
    if($('input[name="creativity"]:checked').length == 0 ||
    $('input[name="intelligence"]:checked').length == 0 ||
    $('input[name="initiative"]:checked').length == 0 ||
    $('input[name="motivation"]:checked').length == 0 ||
    $('input[name="development"]:checked').length == 0 ||
    $('input[name="vision"]:checked').length == 0 ||
    $('input[name="Integrity"]:checked').length == 0 ||
    $('input[name="Confidentiality"]:checked').length == 0 ||
    $('input[name="Interpersonal"]:checked').length == 0 ||
    $('input[name="speed"]:checked').length == 0 ||
    $('input[name="accuracy"]:checked').length == 0 ||
    $('input[name="ability"]:checked').length == 0 ||
    $('input[name="assessmnt"]:checked').length == 0 ||
    $('input[name="errors"]:checked').length == 0)
       alert('some fields were left blank..');
       // alert('some fields were left blank...');
       return false;
    
 

但我觉得可以有更好的方法来传递数组中的名称.. 所以我决定使用单选按钮的名称来做到这一点

 //create the array by splitting string names.... 
 let arr = String('creativity;intelligence;initiative;motivation;development;vision;Integrity;Confidentiality;Interpersonal;speed;$accuracy;ability;assessmnt;errors').split(';');

//loop through and validate...
function validateAppRXForm() 
   arr.forEach(name => 
      if($('input[name=`$name`"]:checked').length == 0)
         alert('some fields were left blank..');
         return false;
      
   );

但它不工作......

【问题讨论】：

@mplungjan 它仍然有效，我只是更喜欢投射它......

请注意forEach 中的return 不会返回到外部函数。使用some() 会是一种更清洁的方法

【参考方案1】：

您可以使用Array#every() 和is(':checked') 作为比检查长度更短的编写方式

//create the array by splitting string names.... 
let arr = 'creativity;intelligence;initiative'.split(';');

function isValid()
  return arr.every(name => $(`input[name='$name']`).is(':checked'))


console.log('On load:', isValid())

// check one of each
arr.forEach(name => $(`input[name='$name']`).first().prop('checked', true))
console.log('After checked:', isValid())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  Creativity:
  <label><input type="radio" name="creativity" value="yes" />Yes</label>
  <label><input type="radio" name="creativity" value="no" />No</label>
  <br/> Intelligence:
  <label><input type="radio" name="intelligence" value="yes" />Yes</label>
  <label><input type="radio" name="intelligence" value="no" />No</label>
  <br/> Initiative:
  <label><input type="radio" name="initiative" value="yes" />Yes</label>
  <label><input type="radio" name="initiative" value="no" />No</label>
  <br/>
  <input type="submit" />
</form>

【讨论】：

不错的一个.......您没有在提交时进行验证，但仍然不错

【参考方案2】：

像这样，虽然我建议不要使用未选中的收音机，但如果你想测试 none/a/b 选择，请选择代替

//create the array by splitting string names.... 
let arr = 'creativity;intelligence;initiative'.split(';');
$(function() 
  $("form").on("submit", function(e) 
    if (arr.filter(item => $(`input[name=$item]:checked`).length === 0).length > 0) 
      console.log("some rads not checked");
      e.preventDefault();
    
  )
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  Creativity:
  <label><input type="radio" name="creativity" value="yes" />Yes</label>
  <label><input type="radio" name="creativity" value="no" />No</label>
  <br/> Intelligence:
  <label><input type="radio" name="intelligence" value="yes" />Yes</label>
  <label><input type="radio" name="intelligence" value="no" />No</label>
  <br/> Initiative:
  <label><input type="radio" name="initiative" value="yes" />Yes</label>
  <label><input type="radio" name="initiative" value="no" />No</label>
  <br/>
  <input type="submit" />
</form>