Laravel login - использование автофокуса

Question

Мне нужно расширить мою регистрационную форму, чтобы автофокусировка была отправлена ​​в поле, где проверка не удалась.

Таким образом, если имя пользователя неверно, поле имени пользователя должно очищаться и направлять фокус.

И наоборот, если сбой пароля, фокус должен быть отправлен в поле пароля.

Я мог бы сделать это в php наверняка, но не знаю, как адаптировать собственные элементы формы Laravel для достижения этого.

<form method="post" autocomplete="off" role="form"> 
    <input type="hidden" name="_token" value="{{{ csrf_token() }}}" /> 
    <div class="form-group @if($errors->has('username')) has-error @endif"> 
     <label for="username">Username</label> 
     {{ Form::text('username', null, array('placeholder' => 'Username', 'autofocus' => 'true', 'id' => 'username', 'class' => 'form-control required')) }} 
     @if($errors->has('username')) <p class="help-block">{{{ $errors->first('username') }}}</p>@endif 
    </div> 
    <div class="form-group @if($errors->has('password')) has-error @endif"> 
     <label for="password">Password</label> 
     {{ Form::password('password', array('placeholder' => 'Password', 'id' => 'password', 'class' => 'form-control required')) }} 
     @if($errors->has('password')) <p class="help-block">{{{ $errors->first('password') }}}</p>@endif 
    </div> 
    {{ Form::submit('Login', array('class' => 'btn btn-primary', 'title' => 'Login')) }} 
</form> 

Answer 1

Это то, что я буду делать в javascript в разделе просмотра Blade. Я даю раздел под названием «скрипты» на моем шаблоне.

Я использую JQuery Plugin для выбора элемента.

@section('scripts') 

<script type="text/javascript"> 

$(document).ready(function(){ 

    @if($errors->first('user')) 
    $("input[name='username']").focus(); 
    @elseif($errors->first('password')) 
    $("input[name='password']").focus(); 
    @endif 

}); 

</script> 

@stop 

Answer 2

Я думаю, что главная проблема заключается в том, что вы не будете в состоянии сделать это с помощью нативных форм хелперов Laravel и иметь его просто работать. Вы могли бы расширить класс FormBuilder и добавить свою собственную логику (которая принимает мешок валидатора/ошибок при создании экземпляра и автоматически добавляет autofocus к первому входному входу, который выводит ошибку), но я думаю, что ваш лучший выбор был бы просто сделайте это в представлении с некоторыми ifs (или, возможно, используйте презентатор для сохранения во всей логике представления).

В свете:

{{ Form::open(['autocomplete' => 'off', 'role' => 'form']) }} 
    <div class="form-group @if ($errors->has('username')) has-error @endif"> 
     <label for="username">Username</label> 
     <?php $attrs = ['placeholder' => 'Username', 'id' => 'username', 'class' => 'form-control required']; 
     @if ($errors->has('username')) 
      <?php $attrs[] = 'autofocus'; ?> 
     @endif 
     {{ Form::text('username', null, $attrs) }} 
     @if ($errors->has('username')) 
      <p class="help-block">{{{ $errors->first('username') }}}</p> 
     @endif 
    </div> 
    <div class="form-group @if($errors->has('password')) has-error @endif"> 
     <label for="password">Password</label> 
     <?php $attrs = ['placeholder' => 'Password', 'id' => 'password', 'class' => 'form-control required']; 
     @if ($errors->has('password') && (! $errors->has('username'))) 
      <?php $attrs[] = 'autofocus'; ?> 
     @endif 
     {{ Form::password('password', $attrs) }} 
     @if ($errors->has('password')) 
      <p class="help-block">{{{ $errors->first('password') }}}</p> 
     @endif 
    </div> 

    {{ Form::submit('Login', array('class' => 'btn btn-primary', 'title' => 'Login')) }} 
{{ Form::close() }} 

Это не красиво, имея поставить PHP код там для того, чтобы динамически добавлять атрибуты, которые вы могли бы, возможно, изменить с тройным:

{{ Form::password(
    'password', 
    [ 
     'placeholder' => 'Password', 
     'id'   => 'password', 
     'class'  => 'form-control required', 
     'autofocus' => ($errors->has('password') && (! $errors->has('username')) ? 'autofocus' : null) 
    ] 
) }} 

Но это все еще не очень хорошо.

Но да, расширение класса FormBuilder кажется еще большим усилием - я думаю, это зависит от того, сколько из этих типов форм вы планируете использовать в своем приложении и сколько полей вы должны иметь дело (как в случае, метод просмотра выше становится все более сложным с большим количеством полей, поскольку вам нужно добавить все ! $errors->has('prev_field') бит).