jQuery基于单选来验证输入文本控件

Question

如何验证已选中与单选选项相对应的输入文本？

屏幕截图

例如，使用上图：

如果选择了“联系人1”的“ 电子邮件”单选选项 ，则“联系人1”的“ 电子邮件”文本字段不能为空，但仍允许“联系人1”的“电话”和“美国邮件”文本字段。
如果选择了“联系人2”的“ 美国邮件”单选选项 ，则“联系人2”的“ 美国邮件”文本字段不能为空，但仍允许“联系人2”的“电话”和“电子邮件”文本字段。

我已经使用下面的HTML构建了上面的表单，但是您可以在这里玩我的Fiddle： fiddle 。

开始更新：我在这里有了更新的小提琴，上面有更好的代码：

fiddle2

它在HTML中有更多说明，而在我的jQuery中有更详尽的尝试。 但是由于某种原因，它似乎仍然没有做任何事情。

结束更新

我试图命名字段，以便我的jQuery可以解析它们，但这并不意味着没有更好的方法。

<body>
  <form name="jp2code" action="#" method="POST">
    <fieldset>
        <legend>Contact 1</legend>
        <span>
            <input type="radio" id="group1_PhoneRadio" name="group1"/>
            <label for="group1_PhoneText">Phone:</label>
            <input type="text" id="group1_PhoneText" name="group1_PhoneText"/>
            <br/>
            <input type="radio" id="group1_EMailRadio" name="group1"/>
            <label for="group1_EMailText">E-Mail:</label>
            <input type="text" id="group1_EMailText" name="group1_EMailText"/>
            <br/>
            <input type="radio" id="group1_USMailRadio" name="group1"/>
            <label for="group1_USMailText">US Mail:</label>
            <input type="text" id="group1_USMailText" name="group1_USMailText"/>
        </span>
    </fieldset>
    <fieldset>
        <legend>Contact 2</legend>
        <span>
            <input type="radio" id="group2_PhoneRadio" name="group2"/>
            <label for="group2_PhoneText">Phone:</label>
            <input type="text" id="group2_PhoneText" name="group2_PhoneText"/>
            <br/>
            <input type="radio" id="group2_EMailRadio" name="group2"/>
            <label for="group2_EMailText">E-Mail:</label>
            <input type="text" id="group2_EMailText" name="group2_EMaiText"/>
            <br/>                
            <input type="radio" id="group2_USMailRadio" name="group2"/>
            <label for="group2_USMailText">US Mail:</label>
            <input type="text" id="group2_USMailText" name="group2_USMailText"/>
        </span>
    </fieldset>
    <div>
      <input type="submit" name="submit" value="submit" />
    </div>
  </form>
</body>

编写jQuery的最佳方法是什么？

我是jQuery的新手，但我根据一些Show / hide示例尝试了它。

我在下面创建的内容行不通，但希望能指出我要完成的工作。

$(function() {
    $("input[type='radio']").change(function() { // when a radio button in the group changes
        var id = $(this).id;
        var index = id.indexOf('group');
        if (index == 0) { // is there a better way to do this?
          var groupN_Len = 7; // Length of 'groupN_'
          var radio_Len = 5; // Length of 'radio'
          var preStr = id.substring(0, groupN_Len);
          $"input[name*='preStr']".validate = null; // clear validation for all text inputs in the group
          var postStr = id.substring(groupN_Len + 1, id.Length() + 1 - radio_Len); // extract Phone, EMail, or USMail
          $(preStr+postStr+'Text').validate({ rules: { name: { required: true } } });
        }
    });
});

Answer 1

要确保选中每个字段的单选按钮，请在每个字段集的单选按钮之一中添加属性required="" 。

演示

Answer 2

好的，无论在“联系人组”的“ 联系人首选项”中选择了什么单选按钮，都需要相应的文本字段。

到目前为止，这是我进行jQuery检查的地方：

编辑：

修改了tilda的有关添加“。”的重要详细信息。 类名。
增加了必填属性：如何使用jquery动态地将REQUIRED属性添加到textarea标签？
删除了必填属性： jquery删除了html5必填属性

最终代码有效，看起来像这样：

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript">
$(function() {
  jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
  });
  $("input[type='radio']").change(function() {
    $('.'+$(this).attr('name')).each(function(index) {
      $(this).removeAttr('required');
    });
    if($(this).is(':checked')) {
      $('.'+$(this).attr('id')).each(function(index) {
        $(this).prop('required',true);
      });
    }
  });
  $('#submit').click(function() {
    $(this).validate();
  });
});

回到文档的HTML：通过为单选按钮创建与文本控件的类名匹配的特定id和name，我对文本进行了许多微妙的编辑。

这是最终结果：

<body>
  <form name="jp2code" action="#" method="POST">
    <div>For each field below, provide the Phone Number, E-Mail Address, and Street Address. <b>Indicate the preferred contact method using the radio button.</b></div>
    <fieldset>
        <legend>Contact 1</legend>
        <span>
            <input type="radio" id="group1_Phone" name="group1"/>
            <label for="group1_Phone">Phone:</label>
            <input type="text" name="group1_PhoneText" class="group1 group1_Phone" />
            <br/>
            <input type="radio" id="group1_EMail" name="group1"/>
            <label for="group1_EMail">E-Mail:</label>
            <input type="text" name="group1_EMailText" class="group1 group1_EMail" />
            <br/>
            <input type="radio" id="group1_USMail" name="group1"/>
            <label for="group1_USMail">US Mail:</label>
            <input type="text" name="group1_USMailText" class="group1 group1_USMail" />
        </span>
    </fieldset>
    <fieldset>
        <legend>Contact 2</legend>
        <span>
            <input type="radio" id="group2_Phone" name="group2"/>
            <label for="group2_Phone">Phone:</label>
            <input type="text" name="group2_PhoneText" class="group2 group2_Phone" />
            <br/>
            <input type="radio" id="group2_EMail" name="group2"/>
            <label for="group2_EMail">E-Mail:</label>
            <input type="text" name="group2_EMailText" class="group2 group2_EMail" />
            <br/>                
            <input type="radio" id="group2_USMail" name="group2"/>
            <label for="group2_USMail">US Mail:</label>
            <input type="text" name="group2_USMailText" class="group2 group2_USMail" />
        </span>
    </fieldset>
    <div>
        <input type="submit" value="Send" id="submit"/>
    </div>
  </form>
</body>

让我使用上面的HTML解释jQuery中发生的事情：

当单选按钮的选中状态更改时，每个具有与单选按钮的name属性匹配的类名的控件都将删除必需的属性。
如果选中了单选按钮（即， checked=true ），则每个类名称与单选按钮的id属性匹配的控件都添加了required属性。
最后，验证器似乎必须在单个表单控件上运行（而不是像我以前那样在单个文本控件上运行）。

这是我结尾的样本Fiddle： Fiddle v8

在tilda ：您没有说太多，但是您说的很有帮助！

屏幕截图

jQuery基于单选来验证输入文本控件

问题描述

编写jQuery的最佳方法是什么？

2 个解决方案

解决方案1
1 2014-01-16 00:41:56

解决方案2
0 已采纳 2014-01-15 23:17:06

jQuery基于单选来验证输入文本控件

问题描述

编写jQuery的最佳方法是什么？

2 个解决方案

解决方案1 1 2014-01-16 00:41:56

解决方案2 0 已采纳 2014-01-15 23:17:06

解决方案1
1 2014-01-16 00:41:56

解决方案2
0 已采纳 2014-01-15 23:17:06