如果没有选中任何按钮，如何使单选按钮选项成为必需的，并弹出错误横幅？

Question

我目前正在制作一个html表单来收集一些基本信息。然而，我希望观众陈述他们的性别，这是强制性的。但是，我已经尝试了“必需”功能，但当有人将其保留为空时，不会弹出错误提示。当使用input=text时，它工作得很好，但不适用于单选按钮或下拉列表。我可以知道我的代码中有什么问题吗？我在这里附上了HTML和脚本代码。非常感谢你的帮助！

<div class="hs_gender field hs-form-field">
        
          <label for="gender-student">Gender of Students?*</label><br>
            <label class="radio-inline">
            <input type="radio" name="gender_s" value="male" type="radio" value="" placeholder="" required data-rule-required="true" data-msg-required="You cannot leave it blank.">M</label>
          <label class="radio-inline">
            <input type="radio" name="gender_s" value="female" >F</label><br>
          
          <span class="error1" style="display: none;">
              <i class="error-log fa fa-exclamation-triangle"></i>
          </span>
</div>
<div class="hs_email field hs-form-field">
        
          <label for="studentemail">Your email?*</label>

          <input id="email-student" name="email" required="required" type="email" value="" placeholder="example@gmail.com" data-rule-required="true" data-msg-required="You cannot leave it blank." >
          <span class="error1" style="display: none;">
              <i class="error-log fa fa-exclamation-triangle"></i>
          </span>
</div>

$(".next").click(function() {
        $(".steps").validate({
            errorClass: 'invalid',
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.insertAfter(element.next('span').children());
            },
            highlight: function(element) {
                $(element).next('span').show();
            },
            unhighlight: function(element) {
                $(element).next('span').hide();
            }
        });

Answer 1

要使属性required正常工作，它需要在表单中，并且需要一个提交类型的按钮(或输入)。

​

<form action="">
  <div class="hs_gender field hs-form-field">
    
    <label for="gender-student">Gender of Students?*</label><br>
      <label class="radio-inline">
      <input type="radio" name="gender_s" value="male" type="radio" value="" placeholder="" required data-rule-required="true" data-msg-required="You cannot leave it blank.">M</label>
    <label class="radio-inline">
      <input type="radio" name="gender_s" value="female" required>F</label><br>
    
    <span class="error1" style="display: none;">
        <i class="error-log fa fa-exclamation-triangle"></i>
    </span>
  </div>
  <div class="hs_email field hs-form-field">
  
    <label for="studentemail">Your email?*</label>

    <input id="email-student" name="email" required="required" type="email" value="" placeholder="example@gmail.com" data-rule-required="true" data-msg-required="You cannot leave it blank." >
    <span class="error1" style="display: none;">
        <i class="error-log fa fa-exclamation-triangle"></i>
    </span>
  </div>
  <input type="submit" value="submit">
</form>

​