JQuery验证选择器

时间:2015-01-29 02:00:42

标签: javascript jquery html validation

我希望使用JQuery验证来强制执行必要字段的客户端验证等。

场景是我有动态填充的字段,但它们通常以相同的方式布局。我想要一种方法来根据标签是否具有“必要的”来选择输入字段。类。例如在下面的示例中,我想选择街道1和城市,但不选择街道2输入字段:

<div class="form-group">
    <label for="Street1" class="required col-sm-3 control-label">Street Address</label>
    <div class="col-sm-5">
        <input class="form-control input-sm" id="Street1" name="Street1" type="text" value="" />
    </div>
</div>
<div class="form-group">
    <label for="Street2" class="col-sm-3 control-label">Street Address 2&nbsp;</label>
    <div class="col-sm-5">
        <input class="form-control input-sm" id="Street2" name="Street2" type="text" value="" />
    </div>
</div>

<div class="form-group">
    <label for="City" class="required col-sm-3 control-label">City</label>
    <div class="col-sm-5">
        <input class="form-control input-sm" id="City" name="City" type="text" value="" />
    </div>
</div>

我曾经尝试过但无济于事:

$("label.required  :text").each(function () {
    alert($(this).attr('id') + "  " + $(this).get(0).tagName);
});

2 个答案:

答案 0 :(得分:0)

在表单提交事件中,您必须在每个标签上迭代所需的类并找到它的下一个输入,并验证例如:

$("form").submit(function(){
    var return_state = true;
    $("label.required").each(function(){
    var input = $(this).next().find("input");
        //Validate your input
        //Make return_state = false in case any validation fails
    });
    return return_state;
});

答案 1 :(得分:0)

根据您发布的内容,我相信这是您正在努力完成的事情。此代码仅在每个必需标签后找到:text字段。

$('label.required').each(function () {
    var inputField = $(this).next('div').find('input').filter(':text');
    // Do validation of the field here
});

您可以使用变量inputField来获取有关该字段的特定数据。例如,如果您想获取该字段的ID,只需致电inputField.attr('id')