Generate dynamic css classes in laravel-blade

Question

I'm in a classical scenario where i want based on wheter an error has occurred or not to change the css classes. As shown below, where has-error should change accordingly.

<div class="form-group has-error">

The project is in Laravel, where we mainly want to do everything in Blade as of now, we came up with the following solution which works, but does not look pretty or intuitive at all, so the question is, is there a more optimal way of doing this?

<div class="form-group
@if($errors->has('email'))
        has-error
@endif
">

Jilson Thomas · Accepted Answer · 2016-02-11 21:59:29Z

20

Try the if else condition short hand code:

<form class="form-group {{ $errors->has('email') ? 'has-error' : '' }}">

This seems neat.

Even the Laravel 5.2 auth forms are done this way.

edited Feb 11, 2016 at 21:59

answered Feb 11, 2016 at 21:56

Jilson Thomas

7,31329 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mrhn Over a year ago

Neat tryed a similar apporach, but the compiler kept puking at me, will try this version when i get to the office, thanks this is definetly in the range of pretty enough

Francis · Accepted Answer · 2017-08-16 05:01:52Z

3

You can make use of arrays to store the class names

@php
$formGroupClasses = ['form-group'];

if ($errors->has('email')) {
  $formGroupClasses[] = 'has-error';
}
@endphp

and then implode them to create a string

<form class="{{ implode(' ', $formGroupClasses) }}">

answered Aug 16, 2017 at 5:01

Francis

311 bronze badge

Comments

Wistar · Accepted Answer · 2016-02-11 21:46:01Z

2

That's what I do. You could also do it that way:

@if($errors->has('email'))
    <div class="form-group has-error"> 
       //You can also edit classes of other elements 
    </div>
@else
    <div class="form-group"></div>
@endif

answered Feb 11, 2016 at 21:46

Wistar

3,8005 gold badges48 silver badges71 bronze badges

1 Comment

mrhn Over a year ago

Also the same conclusion i came up with, but missing an ng-class like AngularJS has.

Justin Russell · Accepted Answer · 2024-12-09 17:10:19Z

0

It's obviously been a bit since this question was asked, but these days you can clean things up a bit with conditional classes:

<div @class([
    'form-group',
    'has-error' => $errors->has('email')),
])>

answered Dec 9, 2024 at 17:10

Justin Russell

1,1231 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

Generate dynamic css classes in laravel-blade

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related