Отключить появление CSS3 при нажатии кнопки отправки
У меня есть эффект затухания, который отлично работает, когда загружается моя страница входа.
Я использую форму для сбора имени пользователя и пароля от пользователя, подключенного к базе данных. У меня также есть ошибка PHP, которая показывает, когда имя пользователя и пароль неверны или данные не были вставлены.
Моя проблема в том, что когда я нажимаю «Отправить», ничего не вводя, моя страница снова исчезает, а затем показывает ошибку.
Как я могу остановить постепенное исчезновение страницы при отображении сообщений об ошибках?
Я действительно хочу, чтобы страница исчезла, когда пользователь впервые заходит на сайт.
CSS:
body{
animation: fadein 1.5s;}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
PHP показывает ошибку:
<p><?php echo $error; ?></p>
Если данные неверны, страница перезагружается и отображается сообщение об ошибке.
Ответы 2
Вы можете повторить стиль в дополнение к ошибке, которая перезапишет анимацию. Например:
<style>
body{
animation:unset !important;
}
</style>
Используйте !важный, только если ваша ошибка повторяется перед css.
извините, я думал, что это сработало, но на самом деле анимация перестала работать.
Самым простым решением будет требование проверки вашей формы на стороне клиента. Это предотвратит повторную загрузку страницы каждый раз, когда нажимается кнопка отправки, а форма не является полной или удовлетворительной.
Добавьте атрибут «required» к своим входным данным (как минимум) или добавьте проверку JS.
Например:
<input type = "text" id = "username" required>
<input type = "password" id = "password" required">
<button type = "submit">Submit</button>
Это поддерживается большинством браузеров. https://caniuse.com/#feat=form-validation
Лучше всего дополнить это проверкой javascript. Вы можете найти дополнительную информацию о MDN. https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation
Обновлено: Чтобы ответить на ваш комментарий:
Как вы видите, единственное, что проверяет проверка на стороне клиента, это (а) завершение и / или (б) условие шаблона (например, регулярное выражение или условие HTML5 [input type = "email", input type = «число» и др.]).
Проверка имени пользователя и пароля для существующих пользователей в базе данных будет зависеть от проверки PHP (или другого обработчика на стороне сервера). Без использования AJAX невозможно проверить правильность имени пользователя и пароля без перезагрузки страницы. Предполагая, что вы хотите пропустить изучение AJAX для этого, вы можете попробовать следующее:
If (username) and (password) == (username) and (password)
{redirect to ('success.html')}
else {redirect to ('fail.html')}
NOTE: THIS IS AN OUTLINE OF CONCEPT -- NOT THE ACTUAL CODE
На 'fail.html' не включайте постепенное появление. Это будет означать, что пользователь перейдет на страницу входа (которая постепенно исчезнет), а оттуда перейдет либо на страницу успеха, либо на страницу ошибки, ни одна из которых не будет включать код для постепенного появления.
Это останавливает загрузку страницы, если ничего не введено, но при вводе неправильного имени пользователя или пароля страница все равно загружается.
Спасибо @ hypern00b. Думаю, AJAX - лучший способ добиться того, чего я хочу. Я очень мало знаю об AJAX, но я думаю, что изучение его для этой цели будет стоить того, и надеюсь, что это не займет слишком много времени, чтобы заставить его работать!
Вы перезагружаете страницу после отправки формы?