Когда дело доходит до пользовательского ввода, важно учитывать случаи ввода неверных или недействительных данных. Предоставление пользователям значимой обратной связи об их ошибках может значительно улучшить пользовательский опыт. В этой статье мы рассмотрим несколько методов и примеры кода для перенаправления пользователей на ту же страницу и отображения удобных для пользователя сообщений об ошибках при вставке неверных данных.

Метод 1: отправка формы с проверкой на стороне сервера

<form action="same-page.php" method="POST">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = $_POST['username'];

    // Perform server-side validation
    if (/* validation condition fails */) {
        header('Location: same-page.php?error=invalid_username');
        exit;
    }
// Process valid data
    // ...
}
?>

Метод 2: проверка JavaScript с помощью встроенных сообщений об ошибках

<form action="same-page.php" method="POST" onsubmit="return validateForm()">
  <input type="text" name="username">
  <span id="username-error" ></span>
  <input type="submit" value="Submit">
</form>
<script>
function validateForm() {
  var username = document.getElementsByName('username')[0].value;

  // Perform client-side validation
  if (/* validation condition fails */) {
    document.getElementById('username-error').textContent = "Invalid username";
    return false;
  }

  return true;
}
</script>

Метод 3. Проверка AJAX с динамическими сообщениями об ошибках

<form action="same-page.php" method="POST" onsubmit="return validateForm(event)">
  <input type="text" name="username">
  <span id="username-error" ></span>
  <input type="submit" value="Submit">
</form>
<script>
function validateForm(event) {
  event.preventDefault();
  var username = document.getElementsByName('username')[0].value;

  // Perform AJAX validation
  fetch('/validate-username', {
    method: 'POST',
    body: JSON.stringify({ username: username })
  })
  .then(response => response.json())
  .then(data => {
    if (data.valid) {
      event.target.submit();
    } else {
      document.getElementById('username-error').textContent = data.error;
    }
  });
}
</script>

Метод 4: проверка для конкретной платформы (пример: Laravel)

<!-- Laravel Blade Template -->
<form action="{{ route('form.submit') }}" method="POST">
  <input type="text" name="username">
  @error('username')
    <span class="error" role="alert">{{ $message }}</span>
  @enderror
  <input type="submit" value="Submit">
</form>

<?php
// Laravel Controller
public function submitForm(Request $request)
{
    $request->validate([
        'username' => 'required|alpha_num',
    ]);

    // Process valid data
    // ...
}
?>

Обработка неправильного ввода данных и предоставление удобных сообщений об ошибках — важнейшие аспекты обеспечения бесперебойного взаимодействия с пользователем. Реализовав один или несколько методов, обсуждаемых в этой статье, вы можете гарантировать, что пользователи получат немедленную обратную связь при вводе неверных данных. Не забудьте объединить проверку на стороне сервера с проверкой на стороне клиента для надежной обработки ошибок. Уделяя приоритетное внимание обработке ошибок, вы можете повысить удовлетворенность пользователей и повысить их вовлеченность на своем веб-сайте.