I am using a form both for editing & creating, and have the below input:
<div class="input-group col-sm-6 ml-sm-n2">
<div class="input-group-append">
<div class="input-group-text border-right-0 rounded-left"
style="border-color:#006600;">
<span class="text-darkgreen fas fa-address-card"></span>
</div>
</div>
<input type="text"
style="border-color:#006600;"
class="form-control @error('firstname') is-invalid @enderror"
id="firstname"
name="firstname"
value="{{old('firstname')}} @isset($user) {{$user->firstname}}@endisset"
placeholder="Prénom"
>
</div>
I have 2 questions:
When in 'create mode, there is obviously no 'old' value , but the placeholder does not show (I guess the 'old' exists but is either null or ' ' ?) ; How can I show the placeholder, if at all ?
I want to display the following error message on potential errors ; In the case of this appended input field / div where should I put the following error message code:
@error('firstname'){{$message}}@enderror
do I need to create a div to enclose both above : the append input div AND the error message display ?
I think the placeholder doesn't show because there's a hidden space in the value. Take a look at the space between }}
and @isset
.
value="{{old('firstname')}} @isset($user) {{$user->firstname}}@endisset"
You can set the current value as the second argument for old
function to avoid hidden character, like:
value="{{ old('firstname', $user->firstname) }}"
To display the error message, you can wrap them in a parent div
and move the column class to the parent:
<div class="col-sm-6 ml-sm-n2">
<div class="input-group">
<div class="input-group-append">
<div class="input-group-text border-right-0 rounded-left" style="border-color:#006600;">
<span class="text-darkgreen fas fa-address-card"></span>
</div>
</div>
<input type="text"
style="border-color:#006600;"
class="form-control @error('firstname') is-invalid @enderror"
id="firstname"
name="firstname"
value="{{ old('firstname', $user->firstname) }}"
placeholder="Prénom"
>
</div>
@error('firstname') {{$message}} @enderror
</div>