Создание всплывающих сообщений

Question

Я пытаюсь всплывающие сообщения об ошибках, например, в html 5.

Например:

В этом коде, если я ввести число меньше 0 или больше 5, то появляется сообщение об ошибке.

<input type="number" name="quantity" min="1" max="5"> 

Это будет всплывающее:

Так что я хочу сделать, это я хочу, чтобы отобразить специальное сообщение из моих собственных. Например, если пользователь пытается войти в систему, а пароль неверен, я хочу всплывать, говоря «неверный пароль», без отображения страницы с ошибкой (которая в настоящее время я делаю).

Как я могу это реализовать?

Спасибо за ваше время.

Answer 1

Во-первых, по соображениям безопасности вы не хотите признать, что имя пользователя правильно - обмен сообщениями должен быть более общим, как «Пожалуйста, введите имя пользователя и пароль»

Другое соображение является, как учетные данные проверяются , Это можно сделать с помощью простого веб-сервиса, который возвращает результат JSON. Поэтому просьба: /verifycreds.php?username=John&password=password может вернуть следующее:

{ success: false, message: "Please enter a valid username and password" } 

Оттуда форма будет обновляться с onSubmit обработчика для проверки учетных данных перед отправкой страницы. Для этого примера я буду использовать JQuery - please reference the documentation

$("#myform").submit(function(event) { 
    var verificationURL = "/verifycreds.php?username=" 
          + $('#username').val() 
          + "&password=" + $('#password').val(); 
    $.get(verificationURL, function(data) { 
     if(!data.success) { 
      event.preventDefault(); 
      // Display popup of your choice here with data.message 
     } 
    }); 
}); 

То есть основные настройки. Мы добавляем обработчик onSubmit к #myForm, мы создаем URL-адрес для проверки учетных данных webservice, затем обрабатываем результат и останавливаем отправку формы, если проверка завершается с ошибкой и отображается сообщение.