jquery - Empty label shows during validation in html-bootstrap form -

jquery - Empty label shows during validation in html-bootstrap form -

this question purely css.

i building simple html contact form using twitter bootstrap 3. contact form looks great. , validating form fields, used bootstrap validator plugin. simple use, easy integrate plugin.

http://jsfiddle.net/tlle2/

this initial version of form. on clicking submit button without entering fields, validation messages come up.

i wanted highlight fields in reddish not entered, used below code & removed validation messages script.

highlight: function (element) { $(element).closest('.form-group').addclass('has-error'); }, unhighlight: function (element) { $(element).closest('.form-group').removeclass('has-error'); }

now...the new version of form in next fiddle.

http://jsfiddle.net/xsf37/

now on clicking submit button..all fields highlighted no custom messages shown. label used show custom messages loaded if no messages there.

for example....

for username field,

<label for="txtusername" class="error"></label>

is loaded...so every other field..this breaks form's layout. there way remove labels or not load labels????

thanks in advance.

do in validate function:

errorplacement: function(error,element) { homecoming true; }

the custom error placement function(see documentation) stop creating blank labels.

fiddle

jquery css html5 validation twitter-bootstrap