Question

如何验证是否选中了与无线电选项对应的输入文本？

screen capture

例如，使用上面的图片：

如果选择了联系人1的电子邮件无线电选项，则联系人1的电子邮件文本字段不能为空，但联系人1的电话和美国邮件文本字段仍然是允许的。
如果选择了联系人2的美国邮件广播选项，则联系人2的美国邮件文本字段不能为空，但仍然允许联系人2的电话和电子邮件文本字段

我使用下面的HTML构建了上面的表单，但您可以在此处使用我的小提琴：fiddle。

BEGIN UPDATE：我在这里有更好的代码：

fiddle2

它在HTML中有更多的指令，并且更接近我的jQuery。但是出于某种原因，它似乎仍然没有做任何事情。

END UPDATE

我已尝试命名字段，以便我的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 examples尝试了一下。

我在下面创建的内容不起作用，但希望能说明我想要完成的任务。

$(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=""。

demo

Answer 2

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

这是我到目前为止在我的jQuery检查上的地方：

修改

使用tilda关于添加'。'的重要细节进行了修改。到班级名称。

添加了必需属性：how to dynamically add REQUIRED attribute to textarea tag using jquery?

删除了必需属性：jquery removing html5 required attribute

最终代码有效，如下所示：

<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 和名称来对文本进行了大量微妙的编辑使用文本控件的类名称。

这是最终结果：

<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中发生了什么：

当单选按钮的选中状态发生变化时，每个带有类名的控件都与单选按钮的名称属性相匹配，删除了必需属性

如果选中单选按钮（即checked=true），那么类名称与单选按钮的id 属性匹配的每个控件都具有必填属性已添加。

最后，验证器似乎必须在单个表单控件上运行（而不是像我一样在单个文本控件上运行）。

以下是我结束的示例小提琴：Fiddle v8

在tilda：你说的不多，但你所说的话帮助了很多！

jQuery基于无线电选择验证输入文本控件

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

2 个答案: