带有单选按钮的Happy.js使用输入名称而不是awesomeform.ishappy的输入id

Question

我会感谢所有我能得到的帮助！

我正在使用Happy.js验证表单客户端

我想要验证的第一个输入是一个带有“是/否”的无线电按钮。此输入的ID绑定到javascript函数隐藏/显示两个div，因此我不能将id更改为与happy.js相同：

<input id="id_radio1" type="radio" name="name_radio1" value="Yes" aria-required="true" required/><label for ="id_radio1">Yes</label>
<input id="id_radio2" type="radio" name="name_radio2" value="No" aria-required="true" required//><label for ="id_radio2">No</label>

我的happy.js脚本如下所示，第一个字段#id_radio1是所讨论的代码：

   <script>
      $(document).ready(function () {
        $('#awesomeForm').isHappy({
          fields: {
            // reference the field you're talking about, probably by `id`
            // but you could certainly do $('[name=name]') as well.
            '#id_radio1': {
              required: true,
              message: 'Please specify Gas Spring Type'
            },      
            '#qnty': {
              required: true,
              message: 'Please specify # of Units'
            },
            '#street': {
              required: true,
              message: 'Please enter your Street',
            },
             '#city': {
              required: true,
              message: 'Please enter your City',
             },
             '#state': {
              required: true,
              message: 'Please enter your State/Province',
            },
             '#country': {
              required: true,
              message: 'Please enter your Country',
            },
             '#zip': {
              required: true,
              message: 'Please enter your Zip/Postal Code',
            },
             '#email': {
              required: true,
              message: 'Please enter a valid Email Address',
              test: happy.email // this can be *any* function that returns true or false
            },
          }
        });
      }); 
    </script>

谢谢你的帮助。

供您参考，这是DIV开关的脚本：

<script language="javascript">
$(document).ready(function () {
         $('#div1,#div2').hide();
                    $('#id_radio1').click(function () {
                       $('#div2').hide('fast');
                       $('#div1').show('fast');
                });
                $('#id_radio2').click(function () {
                      $('#div1').hide('fast');
                      $('#div2').show('fast');
                 });
});</script>

Answer 1

您将需要添加一个自定义函数来验证单选按钮并使用输入名称引用它们。像这样的事情应该有效：

$('#awesomeForm').isHappy({
      fields: {
          'input[name=name_radio1]':{
              required: 'sometimes',
              message: 'Please select a value',
              test: function(){ 
                  return $('input[name=name_radio1]').is(':checked');
              },
          }
      }
});

Answer 2

两个单选按钮的名称应该是相同的，ID永远不会相同。