2

I am looking to get hide the span.help-block on success because it is getting added(with no content) and pushing the rest of the content down

I have tried adding into the success: function $('.help-block').hide() but this will only hide the span after moving on from the next form input.

If I add it outside the success function it will work but i need to somehow catch if the validation is a success and then hide the help-block

if (jQuery().validate) {
    var removeSuccessClass = function(e) {
        $(e).closest('.form-group').removeClass('has-success');
    }
    $('#validation-form').validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",

        invalidHandler: function (event, validator) { //display error alert on form submit              

        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
            setTimeout(function(){removeSuccessClass(element);}, 3000);            
        },

        success: function (label) {
            label.closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
        }

        // if i put $('.help-block').hide(); here it works but I need to 
        // find if the validatoin was a success

        if(VALIDATE IS SUCCESS){
          $('.help-block').hide();
        }

    });
}
Pierce McGeough
  • 3,016
  • 8
  • 43
  • 65

4 Answers4

2

Your code...

$('#validation-form').validate({
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        ...
    },
    focusInvalid: false,
    ignore: "",
    invalidHandler: function (event, validator) {            
        ...
    },
    highlight: function (element) {
        ...
    },
    unhighlight: function (element) {
        ...         
    },
    success: function (label) {
        ...
    }                              // <-- comma is missing
                                   // <-- next item should be a key:value pair
    if(VALIDATE IS SUCCESS){       // <-- NOT a valid option for this plugin
        $('.help-block').hide();
    }

});

You have a serious formatting error above. You can only put valid key:value pairs separated by commas within .validate(). After success callback option...

1) there is no comma, but doesn't matter (see next item)
2) the if/else statement is not a key:value pair, but doesn't matter (see last item)
3) an if statement is not an option for this plugin.

...back to your issue...

As per docs, if success is specified, the error label is displayed to show a valid element. So there's no need for you to manually check validity... the function within success only fires when the element is valid.

success: function (label) {
    label.closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
    label.next('.help-block').hide();
}

Proof-of-concept demo: http://jsfiddle.net/gMa72/

Regarding your usage of ignore option: https://stackoverflow.com/a/8565769/594235

ignore: [],  // <-- proper usage when you want to validate hidden fields
Community
  • 1
  • 1
Sparky
  • 98,165
  • 25
  • 199
  • 285
  • Hi, it is still happening, the help block is getting added in after the validation process, its not originally there. I am using the Flaty theme from themeforest http://themes.shamsoft.net/flaty/form_validation.html It works ok here because it is not using the input groups that can be found here starting at email address input http://themes.shamsoft.net/flaty/form_component.html – Pierce McGeough Oct 30 '13 at 17:24
  • @PierceMcGeough, I only added the help block to my code in order to simplify the demo. You'll need to inspect your own dynamic DOM to determine how to properly target the specific `.help-block`. – Sparky Oct 30 '13 at 17:30
  • @PierceMcGeough, if you want an answer that is more specific, then you'll need to construct a working demo in something like jsFiddle. – Sparky Oct 30 '13 at 17:32
0

I had to do something similar when I implemented Twitter Bootstrap ... I globally set the defaults for the jQuery validator, and had to provide a custom class for the errorClass, just to get it to work.

If I left it as the default errorClass, it always would show, taking up unnecessary space.

jQuery.validator.setDefaults({
    highlight: function (element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    success: function (element) {
        element.closest('.form-group').removeClass('has-error');
    },
    errorClass: 'form-control-error'
});
mattruma
  • 16,589
  • 32
  • 107
  • 171
0

Try:

if($('.has-error').length == 0){
    $('.help-block').hide();
}
LJ Wadowski
  • 6,424
  • 11
  • 43
  • 76
0

You can try hiding it through your css by using the !important tag. It will keep labels from being displayed (no space) when the input is valid while still showing error labels.

label.valid.error{
   display: none !important;
}

I am not a front end developer so I am curious about this solution and best coding practices.

user3245597
  • 153
  • 1
  • 6