Hey there!
need an help with 3 things.
Can’t set select option in my form as required, as im using bootstrap doc guide to set validation class., and as pre set the field is set as valid.
how to set the alert messages the icon as in the bootstrap doc guide ( warning) in form
how I set the height in text area field since in the class form-floating can’t set using rows?
How are you building this? With HTML or the input brics?
You can set all the warning text with attributes. I had a video up on better forms. But I hide it for now as I’ll make a series of shorter ones as it was all one video. Rather long lol.
All with input brics
A lot of options are in the right panel.
You have to manually add the attribute messages if you’re using pattern validation etc.
about the warnings… but the changes are in the classes right? so how set the atributes if I can’t see the warning div?
well if you have the full one I don’t mind watch all and learn with it if you don’t mind to share…
I’m out of the office at the moment. But when I get back I’ll link to the video. Bare in mind I recorded it in the middle of the night 
Thanks!
being an developer is always watching tutorials or fixing something that is hard to fix in middle of the night ! know the feeling!
yeah, for the matter of the option field, I already set as required, but on design mode shows what I expected (not validated) but as I start the preview mode ( as in the imaged uploaded first) shows validated.
That’s because there is actual content there, so technically it’s valid.
You can add some JavaScript so if the first item is selected it’s invalid.
Especially if the first item is just select text etc.
The other option is adding a pattern attribute and have it invalid if the option starts with -
Then just have the first option begin with a -
Or “Se….”
that would be a no code option.
@goncalves_daniel, here is the unlisted link. There is probably a lot more that could added here. I might start making short videos like the Better Buttons series… (I have some more buttons to video soon.)
Shameless plug… Don’t forget to subscribe 
exclusive content and tutorials you won’t get anywhere else.
Solid work Pete. 38:40 minutes of informative nuances this end-user never knew about but makes total sense. Thanks very much!
Thank you. I didn’t realise until today, how the zoom failed on export at some points in the video. I think it was a bug in an earlier version of ScreenFlow. Oh well. 
Thanks! Watching the video, helped me a lot, still figuring how all works!
Yeah, there are a ton of things you can do.
Hello!
I’m a bit stuck and would like to ask for help.
I created a form where I applied the bootstrap .is-invalid class. This works perfectly, but when I want to apply the .form-select class next to it, the icon for .is-invalid is messed up, and the arrow icon for .form-select is not visible either.
Can someone help with this, what would be the solution to make both icons visible?
First step, check the browser inspector, make sure the markup is correct, classes are on the select tag and nothing is being over-ridden.
Reference with the bootstrap docs.
Hi @PeteSharp !
I’ve looked at these and there’s basically nothing wrong with them.
It shows each icon perfectly separately, but if I load the two classes at the same time, the form-select arrow disappears and the is-invalid icon becomes small.
I opened a completely empty project, there was nothing in it, and it did the same thing there.
Do you have any ideas?
Take another look in the inspector and compare to the BS Docs, there is a class that should not be there.
Remove it, and it works fine.
What happens is a Blocs problem, that @norm will have to address, I am sure I have mentioned it before.
Blocs is adding .form-control to every field, but select fields should have .form-select not .form-control applied to them (BS docs).
Until Norm addresses that, you could use a script that looks for any select tags, and replaces .form-control with .form-select, that would look like this.
Obviously not the ideal way to have to do it
document.addEventListener('DOMContentLoaded', function() {
const selectElements = document.querySelectorAll('select');
selectElements.forEach(function(select) {
select.classList.remove('form-control');
select.classList.add('form-select');
});
});
Hi @PeteSharp
I checked what you said and couldn’t find anything that would cause the error.
But thank you for the detailed explanation, so what you wrote was completely understandable to me.
The code works perfectly of course.
Thanks for the information and help. 
Update @PeteSharp
Maybe you don’t know that the selection menu is mandatory, is there an option for that? Because this option is given in the others, but nothing here.
The master, master
What do you mean?