Question

我在一个表单中有两组单选按钮。如果您没有检查每套一个单选按钮，那么您不应该能够发送表单。如果可能的话，我想要一个只有 JS （没有jQuery）的解决方案。我在这里找到了一个旧问题的有用功能，并试图使其适应我的情况，但我显然失败了。哪里是我的错？

<form>

<input type="radio" name="date_1" id="dat-1_27-10" value="2017-10-27" <?php echo $checked1 ;?> />
<input type="radio" name="date_1" id="dat-1_28-10" value="2017-10-28" <?php echo $checked2 ;?> />
<input type="radio" name="date_1" id="dat-1_03-11" value="2017-11-03" <?php echo $checked3 ;?> />
<input type="radio" name="date_1" id="dat-1_04-11" value="2017-11-04" <?php echo $checked4 ;?> />

<input type="radio" name="date_2" id="dat-2_27-10" value="2017-10-27" <?php echo $checked5 ;?> />
<input type="radio" name="date_2" id="dat-2_28-10" value="2017-10-28" <?php echo $checked6 ;?> />
<input type="radio" name="date_2" id="dat-2_03-11" value="2017-11-03" <?php echo $checked7 ;?> />
<input type="radio" name="date_2" id="dat-2_04-11" value="2017-11-04" <?php echo $checked8 ;?> />

<input type="submit" name="send" value="send" id="submit" onclick='return validateDateOne(); return validateDateTwo();'/>

</form>

<script>

function validateDateOne() {
      if (!$("input[name='date_1']:checked").val()) {
          alert('Please choose your favourite date');
          return false;
      }
      else {}
}

function validateDateTwo() {
      if (!$("input[name='date_2']:checked").val()) {
           alert('Please choose a second date');
           return false;
      }
      else {}
}

</script>

Answer 1

在函数validateDateTwo()的else条件中使用retrun语句调用函数validateDateOne()，而不是在onclick中调用它。

对于 Pure JS 解决方案，我使用querySelector代替$。

function validateDateOne() {
      if (!document.body.querySelector("input[name='date_1']:checked")) {
          alert('Please choose your favourite date');
          return false;
      }
      else {
         return validateDateTwo();
      }
}

function validateDateTwo() {
      if (!document.body.querySelector("input[name='date_2']:checked")) {
           alert('Please choose a second date');
           return false;
      }
      else {}
}

<form>

<input type="radio" name="date_1" id="dat-1_27-10" value="2017-10-27"  />2017-10-27
<input type="radio" name="date_1" id="dat-1_28-10" value="2017-10-28"  />2017-10-28
<input type="radio" name="date_1" id="dat-1_03-11" value="2017-10-28"  />2017-10-28
<input type="radio" name="date_1" id="dat-1_04-11" value="2017-11-04"  />2017-11-04
<br/>
<input type="radio" name="date_2" id="dat-2_27-10" value="2017-10-27"  />2017-10-27
<input type="radio" name="date_2" id="dat-2_28-10" value="2017-10-28"  />2017-10-28
<input type="radio" name="date_2" id="dat-2_03-11" value="2017-11-03"  />2017-10-28
<input type="radio" name="date_2" id="dat-2_04-11" value="2017-11-04"  />2017-11-04

<input type="submit" name="send" value="send" id="submit" onclick='return validateDateOne();'/>

</form>

Answer 2

将您的支票组合在一个功能中。另外我建议使用jQuery附加提交处理程序。

这是一个有效的jsfiddle

<input type="submit" name="send" value="send" id="submit" />


$('#myform').submit(function(e){
        e.preventDefault();
      if (!$("input[name='date_1']:checked").val()) {
          alert('Please choose your favourite date');
          return;
      }
        if (!$("input[name='date_2']:checked").val()) {
           alert('Please choose a second date');
           return;
      }
      alert("submit")
});

请注意，Jquery提交处理程序包含在onDomReady处理程序中。

另外：客户端验证从不安全。为了确保输入数据，也要在后端验证它。

Answer 3

尝试验证checked框的长度，并在表单validation中添加onsubmit函数，而不是button点击。不需要只有两个函数的单个函数是足够

＆＃13;

function validateDate() {
  if (!$("input[name='date_1']:checked").length) //validate first one
  {
    console.log('select any one in first part');
    return false;
  }
  if (!$("input[name='date_2']:checked").length) //validate second one
  {
    console.log('select any one in second part')
    return false;
  }

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="return validateDate()">
  <!--only do with single function-->

  <input type="radio" name="date_1" id="dat-1_27-10" value="2017-10-27" <?php echo $checked1 ;?> />
  <input type="radio" name="date_1" id="dat-1_28-10" value="2017-10-28" <?php echo $checked2 ;?> />
  <input type="radio" name="date_1" id="dat-1_03-11" value="2017-11-03" <?php echo $checked3 ;?> />
  <input type="radio" name="date_1" id="dat-1_04-11" value="2017-11-04" <?php echo $checked4 ;?> />

  <input type="radio" name="date_2" id="dat-2_27-10" value="2017-10-27" <?php echo $checked5 ;?> />
  <input type="radio" name="date_2" id="dat-2_28-10" value="2017-10-28" <?php echo $checked6 ;?> />
  <input type="radio" name="date_2" id="dat-2_03-11" value="2017-11-03" <?php echo $checked7 ;?> />
  <input type="radio" name="date_2" id="dat-2_04-11" value="2017-11-04" <?php echo $checked8 ;?> />

  <input type="submit" name="send" value="send" id="submit" />

</form>

＆＃13;

如何使用JavaScript验证一个表单中的两组单选按钮？

3 个答案: