Simple HTML Form

JavaScript Forms

If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted:

JavaScript Example

function validateForm() <
let x = document.forms[«myForm»][«fname»].value;
if (x == «») <
alert(«Name must be filled out»);
return false;
>
>

The function can be called when the form is submitted:

HTML Form Example

JavaScript Can Validate Numeric Input

JavaScript is often used to validate numeric input:

Please input a number between 1 and 10

Automatic HTML Form Validation

HTML form validation can be performed automatically by the browser:

If a form field (fname) is empty, the required attribute prevents this form from being submitted:

HTML Form Example

Automatic HTML form validation does not work in Internet Explorer 9 or earlier.

Data Validation

Data validation is the process of ensuring that user input is clean, correct, and useful.

Typical validation tasks are:

• has the user filled in all required fields?
• has the user entered a valid date?
• has the user entered text in a numeric field?

Most often, the purpose of data validation is to ensure correct user input.

Validation can be defined by many different methods, and deployed in many different ways.

Server side validation is performed by a web server, after input has been sent to the server.

Client side validation is performed by a web browser, before input is sent to a web server.

HTML Constraint Validation

HTML5 introduced a new HTML validation concept called constraint validation.

HTML constraint validation is based on:

• Constraint validation HTMLInput Attributes
• Constraint validation CSS Pseudo Selectors
• Constraint validation DOM Properties and Methods

Constraint Validation HTML Input Attributes

Attribute	Description
disabled	Specifies that the input element should be disabled
max	Specifies the maximum value of an input element
min	Specifies the minimum value of an input element
pattern	Specifies the value pattern of an input element
required	Specifies that the input field requires an element
type	Specifies the type of an input element

Constraint Validation CSS Pseudo Selectors

Selector	Description
:disabled	Selects input elements with the «disabled» attribute specified
:invalid	Selects input elements with invalid values
:optional	Selects input elements with no «required» attribute specified
:required	Selects input elements with the «required» attribute specified
:valid	Selects input elements with valid values

Источник

How to validate input using javascript

This javascript code is working fine to validate the field «price». Question : How to make the code to work as global validation? Example: would validate the price, price2, price3, price4, price5 etc.. with a single function. Please let me know 🙂

Instead of using regexp to find out if it is a number, use parseFloat, perhaps? See: w3schools.com/jsref/jsref_parseFloat.asp

7 Answers 7

My personal recommendation would be something like this:

Thanks Brisbe42, work like a charm. There have another option to validate the input only? such a $(«input»)

Yes, you would just do validatePrice(document.form.price.value.trim()) for each of those. This would, naturally, entail then removing the price.focus() in each if statement in validatePrice, to make it work correctly, and change the if statements to just be if (price === «») and if (price !== «»).

If you do not plan on using jQuery this should work.

function validate() < for (var field in document.getElementsByTagName('input')) < if (isPriceField(field)) < field.value = field.value.trim(); if (isNaN(parseFloat(field.value))) < return alertAndFocus(field, "Please enter a valid price"); >> > return true; > function isPriceField(field) < return (field.name.substr(0, Math.min(5, field.name.length)) === 'price') >function alertAndFocus(field, message)

The easiest in this case is really to use jQuery. This way you can use a generic selector and apply the validation on all items.

For anything else you would need to query the DOM and then that doesn’t work the same in all browsers.

Today, you can’t really do anything in Javascript and ignore something like jQuery http://docs.jquery.com/ or Scriptalicious.

I use jsFormValidator to validate my form and it works like a charm. You don’t need to add heavy syntax to your HTML tags, things like:

You just create a basic JSON object to describe how you want to validate your form:

And then you just validate the whole form with on single line of code:

 jsFormValidator.App.create().Validator.applyRules('Login'); //Magic! 

You can validate all 5 prices and return true only if all 5 match your validation rules.

jQuery Form Validator is a feature rich and multilingual jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code.

Even though this plugin has a wide range of validation functions it’s designed to require as little jQuery network traffic as possible. This is achieved by grouping together validation functions in «modules», making it possible to load only those functions that’s needed to validate a particular form.

   
User name (4 characters minimum, only alphanumeric characters): 
Year (yyyy-mm-dd): 
Website:    

Источник

Руководство по валидации форм в JavaScript

Веб-формы стали неотъемлемой частью веб-приложений. Они часто используется для сбора такой информации о пользователе, как имя, адрес электронной почты, местоположение, возраст и т. д. Но вполне возможно, что какой-то пользователь может ввести данные не в том формате, в котором вы ожидаете.

Чтобы сэкономить время и избежать ненужной нагрузки на ресурсы вашего сервера, вы можете проверить данные формы на стороне клиента (то есть в системе пользователя), используя JavaScript, прежде чем передавать их на веб-сервер для дальнейшей обработки.

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

В этом разделе мы более подробно рассмотрим, как выполнять валидацию форм на JavaScript и обрабатывать любые ошибки ввода.

Проверка на стороне клиента не является заменой или альтернативой проверке на стороне сервера. Вы должны всегда проверять данные формы на стороне сервера, даже если они уже проверены на стороне клиента, потому что пользователь может отключить JavaScript в своем браузере.

Проверка формы с помощью JavaScript

Процесс проверки формы обычно состоит из двух частей — проверки обязательных полей и проверки формата данных, которая выполняется для обеспечения того, чтобы тип и формат данных, введенных в форму был валидным.

Что ж, давайте посмотрим как это работает.

Создание HTML-формы

Давайте сначала создадим простую HTML-форму, которую мы будем проверять на стороне клиента, используя JavaScript, когда пользователь нажимает кнопку отправки (submit). Для этого создадим HTML-файл с именем application-form.html и поместим в него следующий код, а затем сохраним его где-нибудь в вашей системе.

      
Форма заявки
 
Имя 
Email 
Номер телефона 
Страна Select Australia India United States United Kingdom  
 
Пол 
Мужской Женский 
 
 
Хобби (не обязательно) 
Спорт Кино Музыка 
 
  

Создание скрипта валидации формы

Теперь мы собираемся создать файл JavaScript, который содержит наш полный скрипт проверки.

Что ж, давайте создадим файл JavaScript с именем validator.js и поместим в него следующий код, а затем сохраним его в том же месте, где вы сохранили предыдущий HTML-файл. Просмотрите каждую строку следующего примера кода, чтобы понять, как работает проверка JavaScript:

// Определяем функции для отображения сообщения об ошибке function printError(elemId, hintMsg) < document.getElementById(elemId).innerHTML = hintMsg; >// Определяем функции для проверки формы function validateForm() < // Получение значений элементов формы var name = document.contactForm.name.value; var email = document.contactForm.email.value; var mobile = document.contactForm.mobile.value; var country = document.contactForm.country.value; var gender = document.contactForm.gender.value; var hobbies = []; var checkboxes = document.getElementsByName("hobbies[]"); for(var i=0; i < checkboxes.length; i++) < if(checkboxes[i].checked) < // Заполняем массив хобби выбранными значениями hobbies.push(checkboxes[i].value); >> // Определяем переменные ошибок со значением по умолчанию var nameErr = emailErr = mobileErr = countryErr = genderErr = true; // Проверяем имя if(name == "") < printError("nameErr", "Пожалуйста, введите ваше имя"); >else < var regex = /^[a-zA-Z\s]+$/; if(regex.test(name) === false) < printError("nameErr", "Пожалуйста, введите правильное имя"); >else < printError("nameErr", ""); nameErr = false; >> // Проверяем адрес электронной почты if(email == "") < printError("emailErr", "Пожалуйста, введите адрес вашей электронной почты"); >else < // Регулярное выражение для базовой проверки электронной почты var regex = /^\S+@\S+\.\S+$/; if(regex.test(email) === false) < printError("emailErr", "Пожалуйста, введите действительный адрес электронной почты"); >else < printError("emailErr", ""); emailErr = false; >> // Проверяем номер мобильного телефона if(mobile == "") < printError("mobileErr", "Пожалуйста, введите номер вашего мобильного телефона"); >else < var regex = /^4\d$/; if(regex.test(mobile) === false) < printError("mobileErr", "Пожалуйста, введите действительный 10-значный номер мобильного телефона"); >else < printError("mobileErr", ""); mobileErr = false; >> // Проверяем страну if(country == "Select") < printError("countryErr", "Пожалуйста, выберите вашу страну"); >else < printError("countryErr", ""); countryErr = false; >// Проверяем пол if(gender == "") < printError("genderErr", "Пожалуйста, выберите ваш пол"); >else < printError("genderErr", ""); genderErr = false; >// Запрещаем отправку формы в случае ошибок if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) < return false; >else < // Создаем строки из входных данных для предварительного просмотра var dataPreview = "Вы ввели следующие данные: \n" + "Имя: " + name + "\n" + "Email: " + email + "\n" + "Номер: " + mobile + "\n" + "Страна: " + country + "\n" + "Пол: " + gender + "\n"; if(hobbies.length) < dataPreview += "Hobbies: " + hobbies.join(", "); >// Отображаем входные данные в диалоговом окне перед отправкой формы alert(dataPreview); > >;

Доступ к значению отдельного поля формы можно получить с помощью синтаксиса document.formName.fieldName.value или document.getElementsByName(name).value . Но, чтобы получить значения из поля формы, которое поддерживает множественный выбор, например, группу чекбоксов, вам нужно использовать оператор цикла, как показано в примере выше (строки с 14 по 21).

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

Вышеприведенный скрипт также отображает данные, введенные пользователем в диалоговом окне для предварительного просмотра перед отправкой формы на веб-сервер.

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

Добавление стилей для формы

Наконец, создайте файл с именем style.css и поместите в него следующий код, затем сохраните его также в том же месте, где вы сохранили два предыдущих файла. Это правила для визуального оформления нашей формы.

body < font-size: 16px; background: #f9f9f9; font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; >h2 < text-align: center; text-decoration: underline; >form < width: 300px; background: #fff; padding: 15px 40px 40px; border: 1px solid #ccc; margin: 50px auto 0; border-radius: 5px; >label < display: block; margin-bottom: 5px >label i < color: #999; font-size: 80%; >input, select < border: 1px solid #ccc; padding: 10px; display: block; width: 100%; box-sizing: border-box; border-radius: 2px; >.row < padding-bottom: 10px; >.form-inline < border: 1px solid #ccc; padding: 8px 10px 4px; border-radius: 2px; >.form-inline label, .form-inline input < display: inline-block; width: auto; padding-right: 15px; >.error < color: red; font-size: 90%; >input[type="submit"] < font-size: 110%; font-weight: 100; background: #006dcc; border-color: #016BC1; box-shadow: 0 3px 0 #0165b6; color: #fff; margin-top: 10px; cursor: pointer; >input[type="submit"]:hover

Теперь откройте файл application-form.html в веб-браузере и попробуйте заполнить некоторые данные и посмотреть, как скрипт реагирует на ввод недопустимых данных в поле формы.

Чтобы узнать о проверке на стороне сервера, ознакомьтесь с Руководством по валидации форм в PHP.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 3.6 / 5. Количество оценок: 7

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Источник