Симпатичная проверка формы

0

В настоящее время я проверяю свои формы с помощью системы уведомлений из jquery. Только с этим следующим кодом:

function validateForm() {
    var a = document.getElementById('inf_field_FirstName').value;
    var b = document.getElementById('inf_field_Email').value;
    if (a == null || a == "" || a == "First Name") {
        alert("Please enter your First Name!");
        return false;
    }
    var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    if (document.getElementById('inf_field_Email').value.search(emailRegEx) == -1) {
        alert("Please enter a valid email address.");
        return false;
    }
}

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

Я наткнулся на эту форму здесь: http://lewishowes.com/ в разделе "начало жить мечтой". Всякий раз, когда вы не вводите что-то в каком-либо тексте, появляется в поле под полем, в котором вы указываете, как правильно заполнить форму.

Как можно достичь такого метода?

Теги:
validation
forms

1 ответ

2
Лучший ответ

В этом конкретном примере на самом деле нет библиотек или классной работы, он просто использует встроенные методы проверки HTML5. Например, в поле электронной почты он не делает type="text" но вместо этого type="email". Это означает, что когда форма пытается быть отправлена, браузер автоматически проверяет, действительно ли она действительна. По-моему, есть и более продвинутые, настраиваемые методы, но использование типа email на input теге является первым шагом и часто достаточно для простых случаев. Вы также используете required атрибут для создания поля. И вместо того, чтобы оставить только First Name в качестве значения по умолчанию для поля первого имени, используйте атрибут placeholder. например:

<input type="text" id="inf_field_FirstName" placeholder="First Name" required>
<input type="email" id="inf_field_Email" placeholder="Email Address" required>

jsfiddle: http://jsfiddle.net/markasoftware/UdJ4Z/1/ Обратите внимание, что при отправке формы вы получите сообщение об ошибке, потому что на стороне сервера ничего не обрабатывать. Тем не менее, вы сможете видеть сообщения при вводе недопустимого текста

Обратите внимание, что вы также должны использовать стандартную проверку JavaScript или серверной стороны, так как это имеет ограниченную поддержку браузера. Если пользовательский ввод будет делать что-то на сервере, который может быть подвергнут злоупотреблениям, УБЕДИТЕСЬ, что у вас есть проверка на стороне сервера, или кто-то взломает ваш сайт.

Поделиться
  • 0
    хорошие предупреждения ... И мне всегда интересно, у кого на самом деле есть время дня, чтобы сидеть и взламывать случайные сайты просто так.
  • 0
    иногда есть нечто большее, чем «просто черт побери». Они могут использовать SQL-инъекцию, чтобы испортить базу данных, которая может содержать пользовательскую информацию, которую они могут продавать или использовать напрямую. И пользователям это не нравится.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню