如何在输入中添加带有jquery的类来添加has-something

时间:2017-02-14 14:03:52

标签: javascript jquery html5 twitter-bootstrap-3

大家好我正在尝试创建一个只对显示效果进行jquery验证的表单。

  <div id="input_group_name" class="form-group col-sm-12 col-md-6 col-lg-6 has-feedback">
    <div class="input-group ">
     <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
     <input id="name_input" class="form-control" type="text" placeholder="Name" autofocus="true" required="true">
     <span id="input_icon_feedback" class=""></span>
   </div>
</div>

var x = document.getElementById("btnCheckPersonalInfo");
    var y = document.getElementById("input_group_name");
    var i = document.getElementById("name_input");
    $(x).click(function(){
        if(i === ""){
            $(y).addClass("has-error");
        }else{

            $(y).addClass("has-success");
        }

我正在尝试点击一个btn输入字段将has-success更改为has-error,当用户提交表单时。在这种情况下只有一个输入字段!Sory表示不清楚

1 个答案:

答案 0 :(得分:0)

根据我的理解,您可以简单地遍历表单的每个元素并进行验证。
我们不知道您尝试进行何种验证,因此请假设您只是尝试验证它不是空的。

$('#myform :input').each(function($index, $value) {
    if($($value).val() === "") {
        $($value).parent().addClass("has-error").removeClass("has-success");
    } else {
        $($value).parent().addClass("has-success").removeClass("has-error");
    }
})