1

So I have built some validation in Javascript and when a field has an error the div <div class="form-group">...</div> becomes <div class="form-group has-error">...</div>

I then have a .btn-bar div that contains the button for submitting the form. I have this hidden by default when the page loads: 

$(document).ready(function(){
    $('.registration-information').hide();
    $('.btn-bar').hide();
});

I have a function to show the .btn-bar: 

function enableButtons(){
  if(noErrors){
    $('.btn-bar').slideDown();
  }
}

Now obviosuly, the script above doesn't work. More specifically, the if statement. My question, is how do I search for a div that has has-error in the class name on the page? If there is one then the btn-bar does not show, if there isn't any then the btn-bar shows.

user3758114
  • 47
  • 2
  • 7
  • possible duplicate of [Is there an "exists" function for jQuery?](http://stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery) – Max Leske Jun 19 '14 at 21:31

2 Answers2

1

It's actually fairly simple in jQuery. Try something like this:

function noErrors() {
    return $('.has-error').length == 0;
}

function enableButtons(){
    if(noErrors()){
        $('.btn-bar').slideDown();
    }
}

I separated noErrors() into its own function, in case there are other validation tests you eventually want to add in that aren't related just to the .has-error class.

Good luck!

Jason M. Batchelor
  • 2,951
  • 16
  • 25
  • I will accept this answer as soon as I can. The others may work, but they are not what I'm looking for in this project. I will keep them in mind though! – user3758114 Jun 19 '14 at 21:18
  • What about hiding it until every input on the page has a value, since they are all required. – user3758114 Jun 19 '14 at 21:25
  • In that case, you'll need to clear the .has-error class from each item as it changes (look at the 'change' event), and test enableButtons() each time. There might be more efficient ways to do that, depending on the size of your form, but that's where I'd look to start. – Jason M. Batchelor Jun 19 '14 at 21:28
  • 1
    The main problem with the above code is that you're searching globally on your complete site for an has-error class existence. Your code would not work if you have two independent form-groups on the same site. You should definitely think about modularization. Check out: http://code.tutsplus.com/tutorials/writing-modular-javascript--net-14746 – andi1984 Jun 19 '14 at 21:39
  • I agree it should be scoped better, but with the code sample provided, I just have a general piece of guiding code. You do make a very valid point, that the OP should keep in mind! – Jason M. Batchelor Jun 19 '14 at 22:35
0

You can achieve this simply by doing this :

$(document).ready(function(){
    $('.registration-information').hide();
    $('.btn-bar').hide();

    if (!$('.has-error')) {
        $('.btn-bar').slideDown();
    }
});

It will check to see if any element has the class .has-error , and if it does not ! exist anywhere on the page, it will show the .btn-bar.

CRABOLO
  • 8,605
  • 39
  • 41
  • 68