laravel input paleholder does not show

Question

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 ?

Answer 1

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>

Answer 2

value="{{old('firstname')}} @isset($user) {{$user->firstname}}@endisset" is always going to have at least a space in it, because of the space between the old() call and the @isset.

You might consider setting the user's name as a default for the old call, like so:

value="{{ old('firstname', optional($user)->firstname) }}"

^{If unfamiliar with the optional() helper, see https://laravel.com/docs/10.x/helpers#method-optional.}

Answer 3

Your code seems mostly correct, but there's a small issue with the way you're concatenating the values inside the value attribute. Try something like this instead:

<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"
>
@error('firstname')
    <div class="invalid-feedback">{{ $message }}</div>
@enderror