Forms

x-larastrap::form is one of the most complex (and useful) components in Larastrap. It plays well with x-larastrap::field to provide a powerful tool to organize, populate and handle the forms of your Laravel application.

obj

As all other Containers, forms have an obj parameter which can be populated with an object (eventually: an Eloquent model). This parameter is inherited by all child input fields, which values are then inited with the proper attributes matched by their name.

When obj is null , all child inputs are left with their explicit value (if set at all).

Must be a valid email address 
@php

$obj = (object) ['id' => 1234, 'name' => 'Foo', 'bio' => 'A very smart guy!', 'email' => 'foo@bar.baz', 'country' => 'it', 'colors' => ['red', 'blue']];
$countries = ['fr' => 'France', 'de' => 'Germany', 'it' => 'Italy'];

@endphp

<x-larastrap::form :obj="$obj">
    <x-larastrap::hidden name="id" />
    <x-larastrap::number name="id" label="ID" disabled="true" />
    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::text name="surname" label="Surname" value="Bar" />
    <x-larastrap::textarea name="bio" label="Bio" />
    <x-larastrap::email name="email" label="EMail" help="Must be a valid email address" />
    <x-larastrap::check name="check" label="Check" />

    <x-larastrap::select name="country" label="Country (as select)" :options="$countries" />
    <x-larastrap::radios name="country" label="Country (as radio)" :options="$countries" color="danger" />

    <x-larastrap::checks name="colors" label="Colors" :options="['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue']" color="warning" />
</x-larastrap::form>

<form id="form-3416a75f4cea9109507cacd8e2f2aefc" class="" method="post" name="form-3416a75f4cea9109507cacd8e2f2aefc">
  <input type="hidden" name="_token" value="fBA84BFlwbIZzQvExSe0mqW0xNWqHVx9H20AcbMu"> <input id="hidden-ec267c9c6ea0334adc9260b7bfc91c3c" type="hidden" class="" name="id" value="1234">
  <div class="row mb-3">
    <label for="input-25599770dbec57ac4a7ee7906d7b9f7e" class="col-4 col-form-label">ID</label>
    <div class="col-8">
      <input id="input-25599770dbec57ac4a7ee7906d7b9f7e" type="number" class="form-control-plaintext" name="id" value="1234" step="1" min="-9223372036854775808" max="9223372036854775807" disabled>
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-9712bd5cd2cb1e865930db435281268b" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-9712bd5cd2cb1e865930db435281268b" type="text" class="form-control" name="name" value="Foo">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-dde6755e6f48d20ccabfcf3e2fca4edb" class="col-4 col-form-label">Surname</label>
    <div class="col-8">
      <input id="input-dde6755e6f48d20ccabfcf3e2fca4edb" type="text" class="form-control" name="surname" value="Bar">
    </div>
  </div>
  <div class="row mb-3">
    <label for="textarea-a52d78d421adfbca00d3f28725bc232e" class="col-4 col-form-label">Bio</label>
    <div class="col-8">
      <textarea id="textarea-a52d78d421adfbca00d3f28725bc232e" class="form-control" name="bio">A very smart guy!</textarea>
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-fc76d0de2f62aca08f0ef41e7ab69ed1" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-fc76d0de2f62aca08f0ef41e7ab69ed1" type="email" class="form-control" name="email" value="foo@bar.baz">
      <div class="form-text">
        Must be a valid email address
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="check-7dc03d7597d074d898382b1632d1d664" class="col-4 col-form-label">Check</label>
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-7dc03d7597d074d898382b1632d1d664" type="checkbox" class="form-check-input" name="check">
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="select-5810451aecb9fec89a2382b15bd96d71" class="col-4 col-form-label">Country (as select)</label>
    <div class="col-8">
      <select id="select-5810451aecb9fec89a2382b15bd96d71" class="form-select" name="country">
        <option value="fr">
          France
        </option>
        <option value="de">
          Germany
        </option>
        <option value="it" selected>
          Italy
        </option>
      </select>
    </div>
  </div>
  <div class="row mb-3">
    <label for="radios-b705c892a1791a0efa78c2171b51faaf" class="col-4 col-form-label">Country (as radio)</label>
    <div class="col-8">
      <div class="btn-group" role="group">
        <input type="radio" class="btn-check" name="country" id="radios-b705c892a1791a0efa78c2171b51faaf-0309a6c666a7a803fdb9db95de71cf01" autocomplete="off" value="fr"> <label class="btn btn-danger" for="radios-b705c892a1791a0efa78c2171b51faaf-0309a6c666a7a803fdb9db95de71cf01">France</label> <input type="radio" class="btn-check" name="country" id="radios-b705c892a1791a0efa78c2171b51faaf-d8b00929dec65d422303256336ada04f" autocomplete="off" value="de"> <label class="btn btn-danger" for="radios-b705c892a1791a0efa78c2171b51faaf-d8b00929dec65d422303256336ada04f">Germany</label> <input type="radio" class="btn-check" name="country" id="radios-b705c892a1791a0efa78c2171b51faaf-1007e1b7f894dfbf72a0eaa80f3bc57e" autocomplete="off" value="it" checked> <label class="btn btn-danger" for="radios-b705c892a1791a0efa78c2171b51faaf-1007e1b7f894dfbf72a0eaa80f3bc57e">Italy</label>
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="checks-e07b2f184f10a2ed536fdaf141c5bce8" class="col-4 col-form-label">Colors</label>
    <div class="col-8">
      <div class="btn-group" role="group">
        <input type="checkbox" class="btn-check" name="colors[]" id="checks-e07b2f184f10a2ed536fdaf141c5bce8-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red" checked> <label class="btn btn-warning" for="checks-e07b2f184f10a2ed536fdaf141c5bce8-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="checkbox" class="btn-check" name="colors[]" id="checks-e07b2f184f10a2ed536fdaf141c5bce8-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-warning" for="checks-e07b2f184f10a2ed536fdaf141c5bce8-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="checkbox" class="btn-check" name="colors[]" id="checks-e07b2f184f10a2ed536fdaf141c5bce8-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue" checked> <label class="btn btn-warning" for="checks-e07b2f184f10a2ed536fdaf141c5bce8-9594eec95be70e7b1710f730fdda33d9">Blue</label>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-7e630c826512b2ca1f94dfda1d8d9af0" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

action / method

action and method parameters are equivalent to the classic HTML attributes for forms. But you can specify once a default method in your configuration file (by default it is POST ).

Any method different than POST or GET translates to @method('XYZ'), as supported by Laravel.

This is a delete form!
<x-larastrap::form method="DELETE" :buttons="[['label' => 'Delete!', 'color' => 'danger', 'type' => 'submit']]">
    <div class="alert alert-danger">This is a delete form!</div>
</x-larastrap::form>

<form id="form-9778d5d219c5080b9a6a17bef029331c" class="" method="post" name="form-9778d5d219c5080b9a6a17bef029331c">
  <input type="hidden" name="_token" value="fBA84BFlwbIZzQvExSe0mqW0xNWqHVx9H20AcbMu"> <input type="hidden" name="_method" value="DELETE">
  <div class="alert alert-danger">
    This is a delete form!
  </div>
  <div class="col-12 text-end">
    <button id="button-5ea7e8d4543eb62aefcf8f9051b64fe9" class="btn btn-danger">Delete!</button>
  </div>
</form>

baseaction

A bit more articulated is baseaction : this is intended to be the prefix of a Laravel's Resource Controller.

In the following example, when obj is set to NULL it is assigned as action the value route('user.store'); otherwise, if obj is a valid object, it will become route('user.update', $obj->id). This is handy to have a single edit form to both create and update the same kind of model.

Of course, when in update mode, the proper PUT method is used.

This form creates a new model.

This form updates the existing model. 
<x-larastrap::form :obj="null" baseaction="user">
    <div class="alert alert-info">
        This form creates a new model.
    </div>

    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>

<br>

@php

$obj = (object) [
    'id' => 123,
    'name' => 'Foo Bar',
    'email' => 'foobar@example.com',
];

@endphp

<x-larastrap::form :obj="$obj" baseaction="user">
    <div class="alert alert-info">
        This form updates the existing model.
    </div>

    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>

<form id="form-2723d092b63885e0d7c260cc007e8b9d" class="" method="post" action="https://larastrap.madbob.org/user" name="form-2723d092b63885e0d7c260cc007e8b9d">
  <input type="hidden" name="_token" value="fBA84BFlwbIZzQvExSe0mqW0xNWqHVx9H20AcbMu">
  <div class="alert alert-info">
    This form creates a new model.
  </div>
  <div class="row mb-3">
    <label for="input-5da944f7bf7de085c3e56c349da5c28a" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-5da944f7bf7de085c3e56c349da5c28a" type="text" class="form-control" name="name" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-d8d4ee5d62e1385d17e3eb76bde6ec85" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-d8d4ee5d62e1385d17e3eb76bde6ec85" type="email" class="form-control" name="email" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-0d663fdf4a6ae35e0bd021e5685dc225" class="btn btn-primary" type="submit">Save</button>
  </div>
</form><br>
<form id="form-eb160de1de89d9058fcb0b968dbbbd68" class="" method="post" action="https://larastrap.madbob.org/user/123" name="form-eb160de1de89d9058fcb0b968dbbbd68">
  <input type="hidden" name="_token" value="fBA84BFlwbIZzQvExSe0mqW0xNWqHVx9H20AcbMu"> <input type="hidden" name="_method" value="PUT">
  <div class="alert alert-info">
    This form updates the existing model.
  </div>
  <div class="row mb-3">
    <label for="input-219118a8ca068a60f8767588c3de96a4" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-219118a8ca068a60f8767588c3de96a4" type="text" class="form-control" name="name" value="Foo Bar">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-92364b49dcc3f86e1800de5676cb2103" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-92364b49dcc3f86e1800de5676cb2103" type="email" class="form-control" name="email" value="foobar@example.com">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-e7ab1d2fbfd55e239c5d3fe1b894d877" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

buttons

The form's buttons (notably: the submit button) are generally not included within the x-larastrap::form node but are defined using the buttons parameter, which has to be an array of arrays, each rappresenting a button and with the parameters for the relevant x-larastrap::button. 

<x-larastrap::form :buttons="[['color' => 'success', 'label' => 'Submit', 'attributes' => ['type' => 'submit']], ['color' => 'danger', 'label' => 'Reset', 'attributes' => ['type' => 'reset']]]">
    <x-larastrap::text name="firstname" label="First Name" />
    <x-larastrap::text name="lastname" label="Last Name" />
    <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>

<form id="form-1385974ed5904a438616ff7bdb3f7439" class="" method="post" name="form-1385974ed5904a438616ff7bdb3f7439">
  <input type="hidden" name="_token" value="fBA84BFlwbIZzQvExSe0mqW0xNWqHVx9H20AcbMu">
  <div class="row mb-3">
    <label for="input-290fdbe0b581643d916af5754e26e5fa" class="col-4 col-form-label">First Name</label>
    <div class="col-8">
      <input id="input-290fdbe0b581643d916af5754e26e5fa" type="text" class="form-control" name="firstname" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-782ac11d90977058b862b0de7e79f48a" class="col-4 col-form-label">Last Name</label>
    <div class="col-8">
      <input id="input-782ac11d90977058b862b0de7e79f48a" type="text" class="form-control" name="lastname" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-139e8d9448b6d38a97bb1904de5364b6" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-139e8d9448b6d38a97bb1904de5364b6" type="email" class="form-control" name="email" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-3512e675531150bbc02416008fb74142" class="btn btn-success" type="submit">Submit</button> <button id="button-d3180499f77b2a22b807225cb8e694ae" class="btn btn-danger" type="reset">Reset</button>
  </div>
</form>

A peculiar parameter which can be used for those buttons is element , that permits to use a different node type for the element. By default it is of course larastrap::button , but can be any other Blade's Component identifier (remember to prefix Larastrap's widgets with larastrap:: ).

This is a Link 
@php

$buttons = [
    ['element' => 'larastrap::link', 'label' => 'This is a Link', 'href' => 'https://larastrap.madbob.org/'],
    ['color' => 'success', 'label' => 'Submit', 'attributes' => ['type' => 'submit']]
];

@endphp

<x-larastrap::form :buttons="$buttons">
    <x-larastrap::text name="firstname" label="First Name" />
    <x-larastrap::text name="lastname" label="Last Name" />
    <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>

<form id="form-5878a7ab84fb43402106c575658472fa" class="" method="post" name="form-5878a7ab84fb43402106c575658472fa">
  <input type="hidden" name="_token" value="fBA84BFlwbIZzQvExSe0mqW0xNWqHVx9H20AcbMu">
  <div class="row mb-3">
    <label for="input-7a453ca31734520ad253567305d7c1d1" class="col-4 col-form-label">First Name</label>
    <div class="col-8">
      <input id="input-7a453ca31734520ad253567305d7c1d1" type="text" class="form-control" name="firstname" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-984665160824a0aaac97d1328b264ded" class="col-4 col-form-label">Last Name</label>
    <div class="col-8">
      <input id="input-984665160824a0aaac97d1328b264ded" type="text" class="form-control" name="lastname" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-cbb8e4f206fd45d14fbead4fdd0cce30" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-cbb8e4f206fd45d14fbead4fdd0cce30" type="email" class="form-control" name="email" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <a id="link-82658e4271685d70826195d45bd9d25a" class="btn btn-primary" href="https://larastrap.madbob.org/">This is a Link</a> <button id="button-affedf7940ee69dba11e1047ababa4c9" class="btn btn-success" type="submit">Submit</button>
  </div>
</form>

Leveraging the Typography widget, you are actually able to append in the Form's footer any kind of text. Even better: any kind of text generated from the contextual obj .

Last update: 2023-05-07 00:15:11 
@php

$user = App\Models\User::inRandomOrder()->first();

$buttons = [
    ['element' => 'larastrap::t', 'node' => 'small', 'name' => 'updated_at', 'prelabel' => 'Last update: ', 'classes' => ['float-start']],
    ['color' => 'success', 'label' => 'Submit', 'attributes' => ['type' => 'submit']]
];

@endphp

<x-larastrap::form :buttons="$buttons" :obj="$user">
    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::email name="email" label="EMail" />
    <hr>
</x-larastrap::form>

<form id="form-a2557a7b2e94197ff767970b67041697" class="" method="post" name="form-a2557a7b2e94197ff767970b67041697">
  <input type="hidden" name="_token" value="fBA84BFlwbIZzQvExSe0mqW0xNWqHVx9H20AcbMu">
  <div class="row mb-3">
    <label for="input-cba96072aa5f4431627f52019f7b9fe3" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-cba96072aa5f4431627f52019f7b9fe3" type="text" class="form-control" name="name" value="Mr. Cyril Adams">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-261a70e82b097f7c392372d061d87241" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-261a70e82b097f7c392372d061d87241" type="email" class="form-control" name="email" value="henri86@example.net">
    </div>
  </div>
  <hr>
  <div class="col-12 text-end">
    <small id="basenode-e07639b3418319ffc1b1de11fbf6e7f4" class="float-start">Last update: 2023-05-07 00:15:11</small> <button id="button-8a5c5fd687ce96e21f1e0d7cb71784ff" class="btn btn-success" type="submit">Submit</button>
  </div>
</form>

buttons_align

The buttons_align parameter permit to define where to put buttons within the form: by default their are aligned to end , but can also be at start or center . 

<x-larastrap::form formview="vertical" buttons_align="start">
    <x-larastrap::text name="firstname" label="First Name" />
    <x-larastrap::text name="lastname" label="Last Name" />
    <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>

<form id="form-3b8a614226a953a8cd9526fca6fe9ba5" class="" method="post" name="form-3b8a614226a953a8cd9526fca6fe9ba5">
  <input type="hidden" name="_token" value="fBA84BFlwbIZzQvExSe0mqW0xNWqHVx9H20AcbMu">
  <div class="mb-3">
    <label for="input-b378979f17badebd64df590b22258583" class="form-label">First Name</label> <input id="input-b378979f17badebd64df590b22258583" type="text" class="form-control" name="firstname" value="">
  </div>
  <div class="mb-3">
    <label for="input-8798601a95bd703a4eab9520cabde20c" class="form-label">Last Name</label> <input id="input-8798601a95bd703a4eab9520cabde20c" type="text" class="form-control" name="lastname" value="">
  </div>
  <div class="mb-3">
    <label for="input-9d6598fc7011b384f210effe3b439c67" class="form-label">EMail</label> <input id="input-9d6598fc7011b384f210effe3b439c67" type="email" class="form-control" name="email" value="">
  </div>
  <div class="col-12 text-start">
    <button id="button-8db68352f3a7c263e4e49dcc138192c6" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

formview

It is possible to organize the layout of the Form in multiple ways, using the formview parameter. horizontal is the default value and behavior, but it is possible to opt for inline ; it this case, please note that labels are converted in placeholders to accomodate into the row. 

<x-larastrap::form formview="inline">
    <x-larastrap::text name="firstname" label="First Name" />
    <x-larastrap::text name="lastname" label="Last Name" />
</x-larastrap::form>

<form id="form-01161aaa0b6d1345dd8fe4e481144d84" class="row row-cols-lg-auto g-3 align-items-center" method="post" name="form-01161aaa0b6d1345dd8fe4e481144d84">
  <input type="hidden" name="_token" value="fBA84BFlwbIZzQvExSe0mqW0xNWqHVx9H20AcbMu">
  <div class="col-auto">
    <input id="input-179614d8133d71d2b2066fea838ac16f" type="text" class="form-control" name="firstname" value="" placeholder="First Name">
  </div>
  <div class="col-auto">
    <input id="input-b8365874cd3fddbba416df0db12a9ffc" type="text" class="form-control" name="lastname" value="" placeholder="Last Name">
  </div>
  <div class="col-12 text-end">
    <button id="button-04ce9d705dfe0cb85ce41b52a6f16ea9" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

Another option is the vertical value for formview . 

<x-larastrap::form formview="vertical">
    <x-larastrap::text name="firstname" label="First Name" />
    <x-larastrap::text name="lastname" label="Last Name" />
    <x-larastrap::email name="email" label="EMail" />
    <x-larastrap::check name="check" label="Check" inline />
    <x-larastrap::checks name="checks" label="Checks" :options="['One', 'Two', 'Three']" />
</x-larastrap::form>

<form id="form-36660e59856b4de58a219bcf4e27eba3" class="" method="post" name="form-36660e59856b4de58a219bcf4e27eba3">
  <input type="hidden" name="_token" value="fBA84BFlwbIZzQvExSe0mqW0xNWqHVx9H20AcbMu">
  <div class="mb-3">
    <label for="input-5d0a151e5b29ba563c529cf3ba74e2a6" class="form-label">First Name</label> <input id="input-5d0a151e5b29ba563c529cf3ba74e2a6" type="text" class="form-control" name="firstname" value="">
  </div>
  <div class="mb-3">
    <label for="input-1b227a510e4eeec3f9d24f24501911e7" class="form-label">Last Name</label> <input id="input-1b227a510e4eeec3f9d24f24501911e7" type="text" class="form-control" name="lastname" value="">
  </div>
  <div class="mb-3">
    <label for="input-04f99994473498cccc88565ab2d3e465" class="form-label">EMail</label> <input id="input-04f99994473498cccc88565ab2d3e465" type="email" class="form-control" name="email" value="">
  </div>
  <div class="mb-3">
    <div class="form-check mt-1">
      <input id="check-3a3ca44d19da4f1d296192b3db5e505e" type="checkbox" class="form-check-input" name="check"> <label for="check-3a3ca44d19da4f1d296192b3db5e505e" class="">Check</label>
    </div>
  </div>
  <div class="mb-3">
    <label for="checks-cc1783ae7d6dec87f2913f308aba3a66" class="form-label">Checks</label>
    <div class="d-block btn-group" role="group">
      <input type="checkbox" class="btn-check" name="checks[]" id="checks-cc1783ae7d6dec87f2913f308aba3a66-06c2cea18679d64399783748fa367bdd" autocomplete="off" value="0"> <label class="btn btn-outline-primary" for="checks-cc1783ae7d6dec87f2913f308aba3a66-06c2cea18679d64399783748fa367bdd">One</label> <input type="checkbox" class="btn-check" name="checks[]" id="checks-cc1783ae7d6dec87f2913f308aba3a66-aada29daee1d64ed0fe907043855cb7e" autocomplete="off" value="1"> <label class="btn btn-outline-primary" for="checks-cc1783ae7d6dec87f2913f308aba3a66-aada29daee1d64ed0fe907043855cb7e">Two</label> <input type="checkbox" class="btn-check" name="checks[]" id="checks-cc1783ae7d6dec87f2913f308aba3a66-ca8a2087e5557e317599344687a57391" autocomplete="off" value="2"> <label class="btn btn-outline-primary" for="checks-cc1783ae7d6dec87f2913f308aba3a66-ca8a2087e5557e317599344687a57391">Three</label>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-0beada9e83ebbbc6d804cf2ced31c767" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

Errors Handling

Larastrap's forms have built-in integration with Laravel's Validation and Bootstrap's Validation, and a few parameters to deal with it.

By default error_handling is set to true and error_bag is set to default . When validation fails, and the error bag is populated, fields involved in the form but considered as valid are pre-populated with the previously submitted values through the proper Laravel helpers.

To ignore validation just set error_handling to false . To change the name of the "error bag" used by your server-side Laravel's validator, set error_bag accordingly.

Submit the form below with at least an empty field to trigger server-side validation, then back here to see the result. 
@php

// Server side validation for this form is defined as:
//
// $request->validateWithBag('special', [
//     'email' => 'required|email|max:255',
//     'name' => 'required',
//     'select' => 'required',
//     'check' => 'accepted',
//     'checks' => 'required',
//     'radios' => 'required',
// ]);

@endphp

<x-larastrap::form action="/validated" error_bag="special">
    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::email name="email" label="EMail" />
    <x-larastrap::select name="select" label="Select" :options="['' => 'Choose One', 'First', 'Second']" />
    <x-larastrap::check name="check" label="Check" />
    <x-larastrap::checks name="checks" label="Checks" :options="['One', 'Two', 'Three']" />
    <x-larastrap::radios name="radios" label="Radio" :options="['One', 'Two', 'Three']" />
</x-larastrap::form>

<form id="form-2d106fdd52e81421f3c118371f0950d8" class="" method="post" action="/validated" name="form-2d106fdd52e81421f3c118371f0950d8">
  <input type="hidden" name="_token" value="fBA84BFlwbIZzQvExSe0mqW0xNWqHVx9H20AcbMu">
  <div class="row mb-3">
    <label for="input-1b631709298459b0a7291734211aee8c" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-1b631709298459b0a7291734211aee8c" type="text" class="form-control" name="name" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-3dc56523fdd6abdeff7414b724d46f6e" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-3dc56523fdd6abdeff7414b724d46f6e" type="email" class="form-control" name="email" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="select-73f0992a4d9e69ed3e67cfebc6a2ee03" class="col-4 col-form-label">Select</label>
    <div class="col-8">
      <select id="select-73f0992a4d9e69ed3e67cfebc6a2ee03" class="form-select" name="select">
        <option value="" selected>
          Choose One
        </option>
        <option value="0">
          First
        </option>
        <option value="1">
          Second
        </option>
      </select>
    </div>
  </div>
  <div class="row mb-3">
    <label for="check-f8871c296f7b3a218b0c5cd117ce9c43" class="col-4 col-form-label">Check</label>
    <div class="col-8">
      <div class="form-check mt-1">
        <input id="check-f8871c296f7b3a218b0c5cd117ce9c43" type="checkbox" class="form-check-input" name="check">
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="checks-55dffc0b85853e593dd3749b0c0078da" class="col-4 col-form-label">Checks</label>
    <div class="col-8">
      <div class="btn-group" role="group">
        <input type="checkbox" class="btn-check" name="checks[]" id="checks-55dffc0b85853e593dd3749b0c0078da-06c2cea18679d64399783748fa367bdd" autocomplete="off" value="0"> <label class="btn btn-outline-primary" for="checks-55dffc0b85853e593dd3749b0c0078da-06c2cea18679d64399783748fa367bdd">One</label> <input type="checkbox" class="btn-check" name="checks[]" id="checks-55dffc0b85853e593dd3749b0c0078da-aada29daee1d64ed0fe907043855cb7e" autocomplete="off" value="1"> <label class="btn btn-outline-primary" for="checks-55dffc0b85853e593dd3749b0c0078da-aada29daee1d64ed0fe907043855cb7e">Two</label> <input type="checkbox" class="btn-check" name="checks[]" id="checks-55dffc0b85853e593dd3749b0c0078da-ca8a2087e5557e317599344687a57391" autocomplete="off" value="2"> <label class="btn btn-outline-primary" for="checks-55dffc0b85853e593dd3749b0c0078da-ca8a2087e5557e317599344687a57391">Three</label>
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <label for="radios-d80a3f9a9ce403afe7b8d0baffc3752b" class="col-4 col-form-label">Radio</label>
    <div class="col-8">
      <div class="btn-group" role="group">
        <input type="radio" class="btn-check" name="radios" id="radios-d80a3f9a9ce403afe7b8d0baffc3752b-06c2cea18679d64399783748fa367bdd" autocomplete="off" value="0"> <label class="btn btn-outline-primary" for="radios-d80a3f9a9ce403afe7b8d0baffc3752b-06c2cea18679d64399783748fa367bdd">One</label> <input type="radio" class="btn-check" name="radios" id="radios-d80a3f9a9ce403afe7b8d0baffc3752b-aada29daee1d64ed0fe907043855cb7e" autocomplete="off" value="1"> <label class="btn btn-outline-primary" for="radios-d80a3f9a9ce403afe7b8d0baffc3752b-aada29daee1d64ed0fe907043855cb7e">Two</label> <input type="radio" class="btn-check" name="radios" id="radios-d80a3f9a9ce403afe7b8d0baffc3752b-ca8a2087e5557e317599344687a57391" autocomplete="off" value="2"> <label class="btn btn-outline-primary" for="radios-d80a3f9a9ce403afe7b8d0baffc3752b-ca8a2087e5557e317599344687a57391">Three</label>
      </div>
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-7ca1f045ef586ef4a33ac7003363180b" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

To, indeed, leverage Bootstrap's client-side validation functionality, use the client_side_errors parameter to deploy the relevant attributes in the HTML markup (and do not forget to init the proper Javascript code).

Submit the form below with at least an empty field to trigger client-side validation. 
<x-larastrap::form id="native-validated" client_side_errors="true">
    <x-larastrap::text name="name" label="Name" required />
    <x-larastrap::email name="email" label="EMail" required />
</x-larastrap::form>

<script>
(() => {
    let form = document.getElementById('native-validated');
    form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
        }

        form.classList.add('was-validated')
    }, false);
})();
</script>

<form id="native-validated" class="needs-validation" method="post" novalidate="1" name="native-validated">
  <input type="hidden" name="_token" value="fBA84BFlwbIZzQvExSe0mqW0xNWqHVx9H20AcbMu">
  <div class="row mb-3" novalidate="1">
    <label for="input-ea5abd9319ff517d6f4af0694db39d47" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <input id="input-ea5abd9319ff517d6f4af0694db39d47" type="text" class="form-control" name="name" value="" required="" novalidate="1">
    </div>
  </div>
  <div class="row mb-3" novalidate="1">
    <label for="input-8217d73114ef9e0c129bfaa908a72ca1" class="col-4 col-form-label">EMail</label>
    <div class="col-8">
      <input id="input-8217d73114ef9e0c129bfaa908a72ca1" type="email" class="form-control" name="email" value="" required="" novalidate="1">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-023e9cb85ed15afad58d28fd48f9f38a" class="btn btn-primary" novalidate="1" type="submit">Save</button>
  </div>
</form>
<script>
(() => {
    let form = document.getElementById('native-validated');
    form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
        }

        form.classList.add('was-validated')
    }, false);
})();
</script>

Larastrap

info@madbob.org

gitlab.com/madbob/larastrap

powered by MAD

PayPal Donation