Adminlte: Forms with errors

[olivergeorge]

It would be great to see some advice / examples of forms with errors.

Seems that quite a difficult part of making forms look good and work well is how the user interacts with validation.

For example:

• http://alistapart.com/article/inline-validation-in-web-forms
• http://www.smashingmagazine.com/tag/forms/

[lenamtl]

Hi ,you can use http://getbootstrap.com/css/#forms-control-validation

[almasaeed2010]

I agree with @lenamtl. This is available in the Bootstrap documentation. Examples are also available in the forms -> general elements section in the AdminLTE preview.

For more advanced usage of form validation with Bootstrap, you can checkout this plugin, which will work out of the box with AdminLTE.

[olivergeorge]

Thanks guys. That link is interesting.

I might be being picky but I find the Bootstrap approach is difficult to
use without the result looking garish. Perhaps it's a matter of taste.

On 10 March 2015 at 07:43, Abdullah Almsaeed [email protected]
wrote:

I agree with @lenamtl https://github.com/lenamtl. This is available in
the Bootstrap documentation. Examples are also available in the forms ->
general elements
http://almsaeedstudio.com/themes/AdminLTE/pages/forms/general.html
section in the AdminLTE preview.

For more advanced usage of form validation with Bootstrap, you can
checkout this plugin
http://reactiveraven.github.io/jqBootstrapValidation/, which will work
out of the box with AdminLTE.

—
Reply to this email directly or view it on GitHub
https://github.com/almasaeed2010/AdminLTE/issues/283#issuecomment-77938048
.

[almasaeed2010]

I see what you mean. I'd use the tooltip as an alternative. Show the error on focus using the tooltip, but I still would change the color of the input to red to indicate an error. Just a thought :)

[olivergeorge]

Yeah, that's about where I end up i think. Mind you, tooltips don't help
for smart phones and tablets.

Anyway, just a thought that there's opportunity to have a better theme if
it addresses those types of issues.

On 10 March 2015 at 12:40, Abdullah Almsaeed [email protected]
wrote:

I see what you mean. I'd use the tooltip as an alternative. Show the error
on focus using the tooltip, but I still would change the color of the input
to red to indicate an error. Just a thought :)

—
Reply to this email directly or view it on GitHub
https://github.com/almasaeed2010/AdminLTE/issues/283#issuecomment-77980906
.

[lenamtl]

Hi,
For form validation this one seems great
http://formvalidation.io

[wmeitzen]

Is there a way to use jQuery's validate utility to show/hide "Input with error" and add/remove the "has-error" class when doing form validation? Or, is there code already in the template that can show me how? (Thank you for such a professional template, btw!)

[chaibialaa]

Well it seems there is no jquery validation able to show different input colors when errors happen. This is really disappointing .. I hoped on that part when firstly downloading this theme which is more than great .. till now ..

[BransonGitomeh]

$.validator.setDefaults({
  highlight: function(element) {
    $(element).closest('.form-group').addClass('has-error');
    $(element).closest('.form-group').removeClass(
      'has-success has-feedback').addClass('has-error has-feedback');
    $(element).closest('.form-group').find('i.fa').remove();
    $(element).closest('.form-group').append(
      '<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');

  },
  unhighlight: function(element) {
    $(element).closest('.form-group').removeClass('has-error');
    $(element).closest('.form-group').addClass('has-success');
    $(element).closest('.form-group').find('i.fa').remove();
    $(element).closest('.control-label').append(
      '<i class="fa fa-check fa-lg form-control-feedback"></i>');
  },
  errorElement: 'span',
  errorClass: 'help-block',
  errorPlacement: function(error, element) {
    if (element.parent('.input-group').length) {
      error.insertAfter(element.parent());
    } else {
      error.insertAfter(element);
    }
  }
});

will make jquery validate plugin show the errors n stuff

[lukaffm]

Did anyone actually tried formvalidation.io for Admin LTE.

Locally using basic bootstrap css and js + formvalidation scripts, it works just fine.
As soon as I put it into Admin LTE, the validation does not work.
I am inserting proper JS and CSS files by formvalidation.io into the head tag.

[vctqs1]

I have same error with you, lukaffm. The validation does not work Admin LTE

[lukaffm]

I managed to fix it somehow locally, but I still have to test online.

Try putting app.js file on the top of Java Script files in head
Also put all form validation js files one after other directly below Jquery js file in head.

On 16. Jan 2018, at 08:44, vctqs1 [e-mail] wrote:

I

[mnszaidi]

1840 i would like to put these validation for the form

https://github.com/cooldeeparmar/Bootstrap-Validator.git
please help to configure it correctly, and theme should have the validation