Reduce multiple if else statements

Question

My Name:<input class="clr" id="name" type="text" /><span class="clr" id="name_error">Name is required</span> <br /><br />

My Email Adress:<input class="clr" id="email" type="text" /><span class="clr" id="email_error">Email is required</span> <br /><br />

My Organisation Name:<input class="clr" id="organisation" type="text" /><span class="clr" id="org_error">Organisation is required</span> <br /><br />

I have 3 input fields. I'm using span to display error message when submitting empty fields.

My problem is, if name field is empty, we should get "Name is required" error, if email field is empty, we should get "email is required" error and so on.

For this, I'm writing below code.

if (name == "")
    $("#name_error").show();
else
    $("#name_error").hide();

if (email == "")
    $("#email_error").show();
else
    $("#email_error").hide();

if (organisation == "")
    $("#org_error").show();
else
    $("#org_error").hide();

Is there any way to reduce if/else statements?

score 10 · Accepted Answer · edited Jun 20 '20 at 09:12

10

Using jQuery effectively, you can do this way.

$('input.clr').each(function(){
    if ($(this).val() == "")
        $(this).next('span.clr').show();
});

Before that, we need to hide them this way:

$('span.clr').hide();

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 04 '13 at 14:22

Praveen Kumar Purushothaman

164,888
24
203
252

4

I would assume a `hide` is needed as well? – Nope Mar 04 '13 at 14:24
1

You're right, that's simpler and more reasonable in this specific case (supposing the DOM doesn't change and the error span always follows the input). – Denys Séguret Mar 04 '13 at 14:25
1

+1, given the provided HTML, this is a nice solution. If HTML structure is possibly changing then switching to class or even data attributes for association between field and message would be another way to go and the same `.each` could be used. – Nope Mar 04 '13 at 14:28
1

Even if the HTML gets changed, it is kind of scalable. – Praveen Kumar Purushothaman Mar 04 '13 at 14:31
@RanadheerReddy Have you included jQuery? Lemme create a fiddle and let you know... – Praveen Kumar Purushothaman Mar 04 '13 at 14:32
sory. i have one more span element in between and error . i have to show() the second span after input @praveen kumar – Ranadheer Reddy Mar 04 '13 at 14:35
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/25529/discussion-between-praveen-kumar-and-ranadheer-reddy) – Praveen Kumar Purushothaman Mar 04 '13 at 14:37

Denys Séguret · Answer 2 · 2013-03-04T14:27:18.660

3

You could do this :

   var obj = window; // or something else, depending on your scope
   ['name', 'email', 'organisation'].forEach(function(v) {
       var $e = $('#'+v+'_error');
       if (obj[v]=="") $e.show();
       else $e.hide();
   });

Note that

this supposes a little more strictness, with the replacement of "org" by "organisation"
I tried to mimic your code but changing at the root (i.e. where you fill the variables like name) would allow for a simpler code
if you know the DOM doesn't change and the error span always follows the input, Praveen's answer is probably simpler and suited

edited Mar 04 '13 at 14:27

answered Mar 04 '13 at 14:21

Denys Séguret

372,613
87
782
758

Note that use of `forEach` will break compatibility in IE8 and older unless you use a shim. – Andy E Mar 04 '13 at 14:27
+1 for being open to either interpretation of organization (organisation). :) – Mark Walters Mar 04 '13 at 14:27

Reduce multiple if else statements

2 Answers2

Using jQuery effectively, you can do this way.

Linked