Is there a way in the Bootstrap-5 world to indicate a input field is required?

[Charles Severance]

Something like this:

<div id="title-group" class="form-group required">
<label for="title" class="form-control-label">Value</label>
<div>
<input type="text" class="form-control" id="title" th:value="${tenant.title}” required />
</div>
</div>

Could we add something like this to our CSS? Or is it in B5 already?

Thanks.

/Chuck

[Kunal Jaykam]

You might want to take a look at this: 

https://getbootstrap.com/docs/5.2/forms/validation/

Hope that helps.

Kunal Jaykam

[Charles Severance]

I have read that page over and over for several hours this morning :)  Nothing about the asterisk in the UI to indicate required.

/Chuck

[Kunal Jaykam]

Have you looked at the "create new account" page in Sakai?  

https://trunk-mysql.nightly.sakaiproject.org/portal/site/!gateway/tool/!gateway-610

Or try something like this:

https://www.accessibility-developer-guide.com/examples/forms/required/

http://blog.adeel.io/2015/10/18/adding-an-asterisk-to-required-fields-in-bootstrap/

[Markus Stetschnig]

Hey Chuck,

what would be the goal with the required class? I didn't see it in B3 and neither in the deprecated Bootstrap classes.
Do you mean we could add CSS rules to style required inputs differently? B5 does not have that built in. I think selecting 'input.form-control:required' would make sense in that case.
As for validation, the browsers validation will still work though.

Does that answer your question or is it about something else?

Markus

[Markus Stetschnig]

Yes, for that case we would need to add custom CSS. Unfortunately this will also require it it's own CSS class without making use of the :has selector.

--
You received this message because you are subscribed to the Google Groups "Sakai Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sakai-dev+...@apereo.org.
To view this discussion on the web visit https://groups.google.com/a/apereo.org/d/msgid/sakai-dev/3E4DA7E1-A2AE-4689-B84A-6891548D1536%40umich.edu.

[Charles Severance]

I fixed it by adding some custom CSS:

https://github.com/sakaiproject/sakai/blob/master/library/src/skins/default/src/sass/tool.scss#L223

It makes this pattern work:

<div id="title-group" class="form-group required"> 
<label for="title" class="form-control-label">Value</label> 
<div> 
<input type="text" class="form-control" id="title" th:value="${tenant.title}” required /> 
</div> 
</div> 

You add “required” to the enclosing div.   Perhaps I should name it something else like form-group-required…

WDYT?

/Chuck

To view this discussion on the web visit https://groups.google.com/a/apereo.org/d/msgid/sakai-dev/d0f58922-7874-aa20-a027-8a1e188b1316%40entornosdeformacion.com.

[Markus Stetschnig]

Nice, maybe we could rename it to .form-control-required? The .form-group class CSS was removed with B4, so maybe we shouldn't require it?

I am not sure if --bs-danger is mapped to any Sakai theme color. --sakai-highlight-color would also be an option.

[Charles Severance]

I made a JIRA to clean this up.

https://sakaiproject.atlassian.net/browse/SAK-48088

Feel free to comment on the JIRA.

/Chuck