How to write a jquery function for same-type controls in html?

Question

i'm designing a form which gets user information and then go another page. There's lots of "input text" controls to fill. User must fill all "input text" controls in order to go home page. if a control is empty, an "x" icon should be put inside "input text".

My main problem is, i'm new at jquery and i dont want to write this function for every control:

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

i need a general function for all controls. here is my html lines:

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

edit: i'm using an "input button" to send these info.

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

웃웃웃웃웃 · Accepted Answer · 2013-08-27 07:25:11Z

3

What about using $.each and looping through all the text elemnts

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

answered Aug 27, 2013 at 7:25

웃웃웃웃웃

12k15 gold badges63 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2013-08-27 08:15:41Z

1

Try to validate all input elements with type text as given below

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

or add a class to those elements which you wish to validate like not-empty then

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

then

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

edited Aug 27, 2013 at 8:15

answered Aug 27, 2013 at 7:21

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Arun P Johny Over a year ago

@AliSağırvelioğulları better if you delete the other question

Vinay Pratap Singh Bhadauria · Accepted Answer · 2013-08-27 07:24:45Z

0

try using this add a class name "requiredField" to all your text fields

in your button click method find all the textboxes

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

then use each method.

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

answered Aug 27, 2013 at 7:24

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

2 Comments

postgresnewbie Over a year ago

should i write this method into my button's click event?

Vinay Pratap Singh Bhadauria Over a year ago

@AliSağırvelioğulları yes, i mentioned it in the second line

Iliya Reyzis · Accepted Answer · 2013-08-27 07:29:19Z

0

how about?

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

example: http://jsfiddle.net/ddDSB/

edited Aug 27, 2013 at 7:29

answered Aug 27, 2013 at 7:20

Iliya Reyzis

3,7272 gold badges21 silver badges32 bronze badges

Comments

Jave · Accepted Answer · 2013-08-27 07:41:23Z

0

//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(){
    ...
});

edited Aug 27, 2013 at 7:41

Jave

31.9k14 gold badges83 silver badges92 bronze badges

answered Aug 27, 2013 at 7:23

SmileAlgernon

12 bronze badges

Collectives™ on Stack Overflow

How to write a jquery function for same-type controls in html?

5 Answers 5

Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related