Field

Field Alert

The field alert provides some fluent methods for displaying messages for form fields.

Features

The field alert has lots of helpful methods that makes it easy to use

Field name - Required

This feature enables you to name the field alerts. Usually the name of the HTML form element. The name is not required when sending Laravel MessageBag to the fields

Example:

In the application

Alert::field('Username looks good')
->name('username')
->error()
->flash();

In the blade

<x-alert-field name="password" />

Field tag - Optional

This feature ensures that your field messages are displayed for only some groups of tags.

Example

In the application

Alert::field('Username looks bad')
->name('username')
->tag('login')
->error()
->flash();

In the blade

<x-alert-field name="username" tag="login" />

Field level

The field level is the color of the field message. The available levels are:

Alert::field(...)->name(...)->primary();
Alert::field(...)->name(...)->secondary();
Alert::field(...)->name(...)->success();
Alert::field(...)->name(...)->info();
Alert::field(...)->name(...)->error();
Alert::field(...)->name(...)->warning();
Alert::field(...)->name(...)->light();
Alert::field(...)->name(...)->dark();

Laravel Validation Errors

By default field alerts also displays Laravel validation errors. It works with Laravel Form request and Validation redirections

For Laravel Unamed Error Bags

   $validator = validator(
      ['firstname' => '', 'lastname' => ''], 
      [
         'firstname' => 'required', 
         'lastname'  => 'required'
      ]
   );

   return redirect()
   ->back()
   ->withErrors($validator);

In the Blade

<x-alert-field name="firstname" />
<x-alert-field name="lastname" />

For Laravel Named Error Bags

Instead of doing this:

{{ $errors->contact->first('firstname') }}

We could do this:

   $validator = validator(
      ['firstname' => '', 'lastname' => ''], 
      [
         'firstname' => 'required', 
         'lastname'  => 'required'
      ]
   );

   return redirect()
   ->back()
   ->withErrors($validator, 'contact');

In the Blade

<x-alert-field name="firstname" tag="contact" />
<x-alert-field name="lastname" tag="contact" />

Result

More Examples

Example 1

In the application

Alert::field('Username looks good')
->name('username')
->tag('login')
->success()
->flash();

Alert::field('Password looks bad')
->name('passsword')
->tag('login')
->error()
->flash();

In the blade

<div class="col-lg-12 mb4">
  <div class="card mb-4">
    <div class="card-body">

      <form class="row g-3 needs-validation" novalidate>
        <div class="col-md-6 position-relative">
          <label for="username" class="form-label">Username</label>
          <input type="text" class="form-control" id="username" value="" required>
          <x-alert-field name="username" tag="login" />
        </div>
        <div class="col-md-6 position-relative">
          <label for="password" class="form-label">Password</label>
          <input type="password" class="form-control" id="password" value="" required>
          <x-alert-field name="password" tag="login" />
        </div>
        <div class="col-12">
          <button class="btn btn-primary" type="submit">Update</button>
        </div>
      </form>
      
    </div>
  </div>
</div>

Result