Question

我很感激能得到的所有帮助！

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

我要验证的第一个输入是带有是/否的单选按钮。此输入的ID绑定到javascript函数hide / show two divs，因此我无法将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永远不能相同。

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

2 个答案: