What does HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements. Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <

I'm trying to use bootstrap 4 to show validation for fields

I'm having to use a custom class pl-errors to format inputs and selects

<div class="col-md-9 @if($errors->has($name)) pl-errors @endif">

        {!! $input !!}

How to I use the :invalid part of the class on my forms to format selects and inputs?

bobbybouwmann

7 years ago

Level 88

All the information you need can be found here: https://getbootstrap.com/docs/4.1/components/forms/#how-it-works

However you need to write some javascript to make this work. For example on submit it will check if the field is filled whenever it is required. If not it will give it the :invalid pseudo element.

The best way to implement this is simply copying the the form examples from bootstrap and using that format. I see that you use {!! $input !!} which means the HTML for this comes from somewhere else?

JackJones

7 years ago

Level 14

My $input uses the Laravel Collective classes for inputs, I like how you can assign a model to a form and it will automatically fill the form values out for me

Form::text('title', null, ['id' => 'title', 'class' => 'form-control form-control-sm'])

That is what $input looks like

I've read that link you posted, but I don't understand it

Please or to participate in this conversation.