0

我在表单顶部有一个选择框，它基本上隐藏或显示表单的另一部分，具体取决于所选内容。默认情况下选择“否”，并且我的表单验证适用于显示的表单部分。

我正在尝试验证在选择“是”时未隐藏的表单的这一部分，因此需要根据选项选择添加或删除该部分字段的属性（无论哪种方式效果最好）。这是因为可以在没有隐藏部分的情况下提交表单，但是如果该部分未隐藏，那么我想验证字段。

我的选择字段：

<select name="Joint" class="input-select" onChange="javascript:fieldsApp2(this);">
        <option value="No" selected="selected" >No</option>
        <option value="Yes">Yes</option>
    </select>

没有验证属性的字段示例（选择“否”时）：

<label class='fieldlabel'>First name:</label>
<div class='field'>
<input type="text" name="Forename" class="input-text">
</div>

<label class='fieldlabel'>Last name:</label>    
<div class='field'>
<input type="text" name="Surname" class="input-text">
</div>

相同的字段，但在选择“是”时需要验证属性：

<label class='fieldlabel'>First name:</label>
<div class='field'>
<input type="text" name="Forename" class="input-text" data-required="true" data-error-message="Valid First Name recquired.>
</div>

<label class='fieldlabel'>Last name:</label>    
<div class='field'>
<input type="text" name="Surname" class="input-text" data-required="true" data-error-message="Valid Last Name recquired.>
</div>

所以我想我正在寻找一种使用 jQuery 在这两者之间切换的方法！不幸的是，我真的不精通jQuery。任何帮助将不胜感激，干杯！

4

3 回答 3

2 
$(function() {
    $('[name="Joint"]').on('change', function() {
        var state     = this.value == 'Yes',
            data_obj1 = {'data-required'      : ( state ? 'true':'' ), 
                         'data-error-message' : ( state ? 'Valid First Name required.' : '') },
            data_obj2 = {'data-required'      : ( state ? 'true':'' ), 
                         'data-error-message' : ( state ? 'Valid Last Name required.' : '') };

        $('[name="Forename"]').attr(data_obj1);
        $('[name="Surname"]').attr(data_obj2);
    });
});

小提琴

这应该根据选择值切换数据属性。

使用data()通常是要走的路，但这并没有真正改变属性值，所以不确定这是否可行？

于 2013-04-08T19:47:50.967 回答
0

像这样的东西应该可以工作，虽然我还没有测试过。

//Fires each time the dropdown is changed
$(".input-select[name='Joint']").change(function() {
    if (this.value == "Yes") {
        $(".input-text").attr({
           data-required: true,
           data-error-message: "Valid name required." //You may have to set both fields individually if you want 2 different messages.
        });
    }
    else {
        $(".input-text").removeAttr("data-required data-error-message");
    } 

});
于 2013-04-08T19:46:51.237 回答
0

如果您的问题是关于获取所需的参数，您可以通过数据属性选择元素，如下所示：

$("input[data-required='true']")

这样您就可以获得需要验证的元素列表。jQuery data() 方法将帮助您动态添加这些必需的属性。

于 2013-04-08T19:51:54.143 回答