Search code examples
laravelplaceholder

laravel input paleholder does not show


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 ?


Solution

  • 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>