Problem/Motivation

As seen in https://getbootstrap.com/docs/4.0/components/forms/?#validation.
The error messages displayed by IFE can use the same style as the link above.

Proposed resolution

Use the styling for form elements.

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#4 use_validation_ife-2955290-4.patch22.63 KBpivica
#4 interdiff-2955290-2-4.txt21.57 KBpivica
#4 f1978f10-f1b3-4341-8772-d714a5f25c35.png193.54 KBpivica
#2 Screenshot from 2018-03-22 12-00-39.png10.45 KBjohnchque
#2 Screenshot from 2018-03-22 12-00-31.png4.95 KBjohnchque
#2 Screenshot from 2018-03-22 11-57-38.png6.24 KBjohnchque
#2 Screenshot from 2018-03-22 11-58-03.png14.88 KBjohnchque
#2 Screenshot from 2018-03-22 11-58-14.png24.39 KBjohnchque
#2 use_validation_ife-2955290-2.patch5.38 KBjohnchque

Comments

yongt9412 created an issue. See original summary.

johnchque’s picture

johnchque
Primary language Spanish
Location Bolivia
commented
Status: Active » Needs review
StatusFileSize
new use_validation_ife-2955290-2.patch5.38 KB
new Screenshot from 2018-03-22 11-58-14.png24.39 KB
new Screenshot from 2018-03-22 11-58-03.png14.88 KB
new Screenshot from 2018-03-22 11-57-38.png6.24 KB
new Screenshot from 2018-03-22 12-00-31.png4.95 KB
new Screenshot from 2018-03-22 12-00-39.png10.45 KB

Been testing this and checking its behavior:

Having problems with checkboxes and textareas.
In checkboxes the message is simply not added.
In textareas the error message is present in the markup but since the div where the error is should be inside the div containing the textarea, the error is never shown.

pivica’s picture

pivica commented
Title: Use validation framework for IFE » Use Bootstrap validation framework for IFE
pivica’s picture

pivica commented
Issue summary: View changes
StatusFileSize
new f1978f10-f1b3-4341-8772-d714a5f25c35.png193.54 KB
new interdiff-2955290-2-4.txt21.57 KB
new use_validation_ife-2955290-4.patch22.63 KB

Here is a new version which improves IEF support a lot, fix all problems from comment 2 and also generally improves forms styling quite a bit. Here is a new look at a complex webform example:

@yongt9412 can you check new version and test it a bit?

johnchque’s picture

johnchque
Primary language Spanish
Location Bolivia
commented

This actually works really nice, tested with different fields and the results are as expected. Should we move on on this and create an issue for adding validation styling on client-side?

berdir’s picture

berdir
Primary language German
Location Switzerland
commented
Status: Needs review » Reviewed & tested by the community

Yes, looks ok to me as well.

  • pivica committed 4c486d8 on 8.x-1.x 
    Issue #2955290 by yongt9412, pivica, Berdir: Use Bootstrap validation...
pivica’s picture

pivica commented
Status: Reviewed & tested by the community » Fixed

Thx guys committed.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.