@Adel1ne

Как корректно очистить input'ы в ActiveForm в Yii2?

Здравствуйте!

Есть стандартная форма:
<?php $form = ActiveForm::begin([
    'id' => 'login-form',
    'options' => ['class' => 'form-horizontal'],
    'fieldConfig' => [
        'template' => "{label}\n<div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-8\">{error}</div>",
        'labelOptions' => ['class' => 'col-lg-1 control-label'],
    ],
]);
?>
<?= $form->field($model, 'login') ?>
<?= $form->field($model, 'password') ?>
<?= $form->field($model, 'name') ?>

<div class='form-group'>
    <div class='col-lg-offset-1 col-lg-11'>
        <?= Html::submitButton('Login', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?>
    </div>
</div>

<?php ActiveForm::end(); ?>

Там стоят всякие валидаторы, после которых могут появится сообщения, например, если input login не прошел валидацию:
<div class="form-group field-editform-login required">
<label class="control-label col-lg-3" for="editform-login">Логин</label>
<div class="col-lg-3"><input type="text" id="editform-login" class="form-control" name="EditForm[login]"></div>
<div class="col-lg-8"><p class="help-block help-block-error"></p></div>
</div>

, то при нажатии на кнопку login, произойдет перезагрузка страницы и полю login добавится класс ошибки has-error и появится сообщение "Такой логин уже есть в БД.":
<div class="form-group field-editform-login required has-error">
<label class="control-label col-lg-3" for="editform-login">Логин</label>
<div class="col-lg-3"><input type="text" id="editform-login" class="form-control" name="EditForm[login]"></div>
<div class="col-lg-8"><p class="help-block help-block-error">Такой логин уже есть в БД.</p></div>
</div>


Суть проблемы в том, что эта форма у меня в модальном окне и при повторном ее открытии я хочу очистить значения всех полей и убрать отображение всех ошибок.
На данный момент методами jQuery, я добился нужного результата, на открытие модального окна, я вешаю команды:
$('form#edit-form input[type="text"]').each(function() {
            $(this).removeAttr('value');
        });
        $('form#edit-form div.form-group').each(function() {
           $(this).removeClass('has-error');
        });
        $('form#edit-form p.help-block').each(function() {
            $(this).text('');
        });

Я убираю все value у input type="text", убираю класс has-error, и затираю сообщение об ошибке.
Все бы хорошо, но после этого происходит один глюк:
Если встать на поле логин, ничего не вводить и перейти на следующее поле, то ошибка незаполненного поля срабатывает сразу на все input'ы, а до этого ошибка появлялась только у input'a с которого я уходил курсором.

Почему так происходит и как сделать нормальную очистку? Возможно есть менее топорное решение в самом классе ActiveForm?
  • Вопрос задан
  • 4436 просмотров
Пригласить эксперта
Ответы на вопрос 4
bitver
@bitver
Возвращайте в контроллере не ту модель, которую загрузили и провалидировали, а new LoginForm().
Ответ написан
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Так не?
window.onload = function(){
document.getElementById('поле1').value = '';
document.getElementById('поле2').value = '';
document.getElementById('поле3').value = '';
}
Ответ написан
@fedek
->input('text', ['class' => 'form-control', 'placeholder' => 'ваш новый пароль', 'value' => '', ]) ?>
Ответ написан
Комментировать
@meloks
Я решил это таким образом:

У меня после отправки формы с помощью Ajax и получения положительного ответа от сервера вызываются следующие методы:

// Закрываю модалку с формой
$('#leaveReview').modal('hide');
// Очищаю значения всех инпутов в форме
$('#leave_feedback_form input[type=text], textarea').each(function (idx, el) {
    $(el).val('');
});
// Показываю модалку успеха
$('#leaveReviewSuccess').modal('show');
// Удаляю классы ошибок и текст ошибок
    $('.has-error').each(function (idx, el) {
        $(el).removeClass('has-error')
        $(el).find('.help-block-error').html('');
    });
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы