Check multiple variables arent empty without IF statement jQuery

Question

Im trying to build a client side validation on my form and I'm wondering if theres a better way to do it than I imagined?

If a field is empty, then I want the parent container border to turn red, I could d this with a list of if statements...

// Complete Signup Validation
$("#signup-com-btn").click(function() {

    var a = $("input.first_name").val();
    var b = $("input.surname").val();
    var c = $("input.email_addr").val();
    var d = $("input.user_age").val();
    var e = $("select.user_type").val();
    var f = $(".profile_image").val();

    if(a==''){
        $(this).parent().css...
        return false;
    }
    if(b==''){
        $(this).parent().css...
        return false;
    }       

...and so on...

});

I was going to use an OR operator but then I wouldnt know which input parent to add the error styling onto? — Liam
– Liam, Commented Jun 6, 2013 at 18:37
Ah I misunderstood I envisioned one big border around them all for some reason, some good answers below now.. — mikey
– mikey, Commented Jun 6, 2013 at 18:39

jterry · Accepted Answer · 2013-06-06 18:37:58Z

1

You could do them all in one loop, if it really is all of them:

$('#signup-com-btn').click(function() {
    var valid = true; // optimist

    $('input, select, .profile_image').each(function() {
        if($(this).val() == '') {
            valid = false;
            $(this).css('border', '1px solid red');
        }
    }

    if(!valid)
        return false;
}

answered Jun 6, 2013 at 18:37

jterry

6,2473 gold badges32 silver badges37 bronze badges

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

Comments

PSR · Accepted Answer · 2013-06-06 18:42:02Z

1

apply same class to all

var valid = true;
$('.className').each(function(){
  if($(this).val() == ""){
   $(this).parent()....  
     valid = false;
  }  
});
 return valid ;

Write this in click function

edited Jun 6, 2013 at 18:42

answered Jun 6, 2013 at 18:36

PSR

40.4k43 gold badges115 silver badges154 bronze badges

1 Comment

Adam Tolley Over a year ago

This is what I was going to suggest. jQuery is very much oriented to manipulating a document that already expresses relationships, so addressing them all with a common class is not only easier, but also a better practice. Your class name could be something like .required - and you will see this sort of pattern on validation frameworks as it allows you to declare an input as required simply by adding the class and not changing the validation code.

David Thomas · Accepted Answer · 2013-06-06 18:50:35Z

1

I'd suggest:

$('input, select, .profile_image').filter(function(){
    return !$(this).val().length;
}).parent().css('border-color', '#f00');

Though I'd prefer to use classes, in order to identify the relevant items and to style the parent element, rather than manually modifying CSS rules, to give:

$('.inputClassName').filter(function(){
    return !$(this).val().length;
}).parent().addClass('redBorder');

edited Jun 6, 2013 at 18:50

answered Jun 6, 2013 at 18:44

David Thomas

254k53 gold badges382 silver badges421 bronze badges

3 Comments

Ahmed El Kilani Over a year ago

value is not a valid property for select or img elements.

David Thomas Over a year ago

As for the select element, that's true (edited); as for the .profile_image element? I have no idea what type of element that is (I'm assuming it's a file-input, but it's purely a guess).

Ahmed El Kilani Over a year ago

i don't know either, but i'm guessing it is an img element

Perocat · Accepted Answer · 2013-06-06 18:36:37Z

0

You can create an array and simulate a foreach loop. Here a Javascript example:

function check_empty(){
    var a = document.getElementById('a')
    var b = document.getElementById('b')
    var c = document.getElementById('c')

    var abc = new Array(a, b, c);

    for(i=0; i<abc.length; i++){
        //do your if stuff here...
    }

answered Jun 6, 2013 at 18:36

Perocat

1,5217 gold badges25 silver badges50 bronze badges

Comments

Michiel Cornille · Accepted Answer · 2013-06-06 18:52:00Z

0

since you're using jquery, jquery validation is a nice option that covers most of your form validation needs!

http://plugins.jquery.com/validation/

answered Jun 6, 2013 at 18:52

Michiel Cornille

2,1171 gold badge19 silver badges44 bronze badges

Collectives™ on Stack Overflow

Check multiple variables arent empty without IF statement jQuery

5 Answers 5

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related