javascript - 如何为html中的同类型控件编写jquery函数？

Question

我正在设计一个获取用户信息然后转到另一个页面的表单。有很多“输入文本”控件要填充。用户必须填写所有“输入文本”控件才能进入主页。如果控件为空，则应在“输入文本”内放置一个“x”图标。

我的主要问题是，我是 jquery 的新手，我不想为每个控件编写这个函数：

$('#send').click(function () {
            if ($('#kname').val().length == 0) {
                $('#kname').css({ background: "url(image/error.png) no-repeat right" });
            }
        });

我需要所有控件的通用功能。这是我的 html 行：

   //some code
       <input type="text" id="knumber" />
        <input type="text" id="kname" />
        <input type="text" id="ksurname" />
   //some other code

编辑：我正在使用“输入按钮”来发送这些信息。

<input type="button" value="Send Them" id="send" />

Answer 1

使用$.each并遍历所有文本元素怎么样？

$('#send').click(function () {
       $("input[type=text]").each(function(){
            if ($(this).val() == '') {
                $(this).css({ background: "url(image/error.png) no-repeat right" });
            }
        });

Answer 2

尝试使用text下面给出的类型验证所有输入元素

$("input[type=text]").filter(function() {
    return $.trim(this.value).length == 0
}).css({
    background : "url(image/error.png) no-repeat right"
});

not-empty或向您希望验证的那些元素添加一个类

<input id="kname" type="text" class="not-empty" />
<input id="ksurname" type="text" class="not-empty" />

然后

$(".not-empty").filter(function() {
    return $.trim(this.value).length == 0
}).css({
    background : "url(image/error.png) no-repeat right"
});

Answer 3

//some code
<input class="validate" type="text" id="knumber" />
<input class="validate" type="text" id="kname" />
<input class="validate"type="text" id="ksurname" />
//some code...


$(".validate").click(function(){
    ...
});

Answer 4

怎么样？

$("#send").click(function() {
     $("input[type=text]").each(function(){
          if ($(this).val().length == 0) {
               $(this).css({ background: "url(image/error.png) no-repeat right" });
          }
     });
});

示例：http: //jsfiddle.net/ddDSB/

Answer 5

尝试使用这个添加一个类名“requiredField”到你的所有文本字段

在您的按钮单击方法中找到所有文本框

textboxes = $('#formid').find('.requiredField');

然后使用每种方法。

textboxes.each(function() {
 if(this.value.length==0){
   $('#kname').css({ background: "url(image/error.png) no-repeat right" });
    //do something here
}
}