Validator displays a blank error message on keyup and blur

carlos-max commented 8 years ago

The validator displays a blank error:

1: After filling a required field and changing focus to another field (Using tab key or clicking);
2: On keyup, when the validator already displayed a validation error message;

1:

2:

The HTML:

<body>
<p id="error-msg">

        <form id="form-cliente" class="tabs" method="post" action="php/cliente_cadastro.php">

        <input type="text" id="cnpj" name="cnpj"  data-validation="required" data-validation-error-msg="O campo CNPJ é obrigatório!">

The script:

$(document).ready(function() {
.....
            var $messages = $('#error-msg');

            $.validate({
                form : '#form-cliente',
                modules: 'html5',                                              
                validateOnBlur : true,                
                showHelpOnFocus : false,
                addSuggestions : false,
                errorMessagePosition : $messages,
                scrollToTopOnError : true,
            });
});

victorjonsson commented 8 years ago

You can use the pseudo class :empty as a quick fix until the issue gets resolved.

#error-msg:empty {
   display: none
}

larssn commented 8 years ago

In my case it was: .form-error:empty { display: none }

carlos-max commented 8 years ago

Larssn fix worked for me.

Thanks for the support guys!

larssn commented 8 years ago

This causes further upset in Chrome 48. It doesn't respect "display: none" for these .form-error(s), and they thus still take up space in the DOM, and the effect is the "wobbling around" that can been seen in carlos' second gif (just with an invisible element). Requesting a patch for this issue, in case the next release is long off.

larssn commented 8 years ago

Thanks for the fix!

victorjonsson / jQuery-Form-Validator

Validator displays a blank error message on keyup and blur #373