Ошибка если в input буквы

I have an input firstname

<input pattern="[a-zA-Z]" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" class="form-control" name="first_name" placeholder="Firstname">

I enter it as : qwerqwe

I kept getting

Please enter on alphabets only. print out

enter image description here

Isn’t qwerqwe suppose to be valid ? I’m a little confuse now, and not sure what I missed here.

Can someone please provide me some hints on this ?

asked May 31, 2016 at 14:24

code-8's user avatar

0

You are allowing only ONE character. You missed the + sign:

<input pattern="[a-zA-Z]+" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" class="form-control" name="first_name" placeholder="Firstname">

As @le_m said in comments, you can write * wildcard to allow empty input:

<input pattern="[a-zA-Z]*" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" class="form-control" name="first_name" placeholder="Firstname">

Community's user avatar

answered May 31, 2016 at 14:39

Marcos Pérez Gude's user avatar

1

use title attribute for validation name.

pattern="[A-Za-z0-9].{1,}" title="Please Enter Valid Company Name"

Suraj Rao's user avatar

Suraj Rao

29.3k11 gold badges94 silver badges103 bronze badges

answered Apr 24, 2021 at 10:39

Shrishailam Shelke's user avatar

3

Put a ^ on front of your patern.

Like so : ^[a-zA-Z]

answered May 31, 2016 at 14:29

Andrius's user avatar

3

Как вывести alert если пользователь ввел буквы в input а не цифры и нажал на кнопку?

if(input.value == Number){
     alert('вы прошли');
}else if(input.value == буквы){
     alert('вводить можно только буквы');
}

не понимаю как делать


  • Вопрос задан

    более двух лет назад

  • 546 просмотров

Если принимать из простого HTML инпута то всё уже придуманно и нельзя ввести буквы в инпут с цифрами еще и мин и макс значения можно указать.

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

if(typeof(input.value) == 'number'){
alert('вы прошли');
}else if(typeof(input.value) == 'string'){
alert('вводить можно только буквы');
}

Пригласить эксперта


  • Показать ещё
    Загружается…

13 июн. 2023, в 21:59

2000 руб./за проект

13 июн. 2023, в 20:23

5000 руб./за проект

13 июн. 2023, в 20:17

3000 руб./за проект

Минуточку внимания

HTML CSS JS

Валидация input

Дата размещения статьи 24/10/2019 👁19925

Валидация input

Валидация input с помощью HTML, JavaScript, а также стилизация верно и не верно заполненного поля ввода.

Валидация input

Валидация input с помощью HTML

Для этой задачи воспользуемся атрибутом pattern. При использовании такого подхода, обязательно нужно сообщить пользователю в каком формате необходимо вводить в данное конкретное поле (с помощью label и/или title).

<label>
    <p>Введите число</p>
    <input type="text" title="Используйте числовой формат" pattern="^[0-9]+$">
</label>

<label>
    <p>Введите число от 1 до 9</p>
    <input type="text" title="Введите число от 1 до 9" pattern="[1-9]">
</label>

<label>
    <p>Введите не более 5 цифр</p>
    <input type="text" title="Разрешено не более 5 цифр" pattern="[0-9]{1,5}">
</label>

<label>
    <p>Введите от 7 до 9 цифр</p>
    <input type="text" title="Разрешено от 7 до 9 цифр" pattern="[0-9]{7,9}">
</label>

<label>
    <p>Только русские слова</p>
    <input
        type="text"
        title="Разрешено использовать только пробелы и русские буквы"
        pattern="^[А-Яа-яЁёs]+$"
    />
</label>

<label>
    <p>Только латинские слова</p>
    <input
        type="text"
        title="Разрешено использовать только пробелы и латинские буквы"
        pattern="^[a-zA-Zs]+$">
</label>

<label>
    <p>Только русские или латинские слова с пробелами, не менее 6 символов</p>
    <input
        type="text"
        title="Разрешено использовать только пробелы и латинские буквы, не менее 6"
        pattern="^[A-Za-zА-Яа-яЁёs]{6,}">
</label>

Демонстрация. После ввода нажмите enter, чтобы посмотреть как будет вести себя форма при попытке отправки её пользователем.

Для составления более сложных паттернов необходимо хорошо знать регулярные выражения.

Более сложный пример: валидация номера телефона.

<label>
    <p>Введите телефон в формате: +7 (777) 777-77-77 (Россия)</p>
    <input
        type="tel"
        pattern="[+]7s[(]d{3}[)]sd{3}[-]d{2}[-]d{2}"
        title="Используйте формат: +7 (777) 777-77-77"
    />
</label>

<label>
    <p>Введите телефон в формате: +375 (33) 333-33-33 (Беларусь)</p>
    <input
        type="tel"
        pattern="[+]375s[(]d{2}[)]sd{3}[-]d{2}[-]d{2}"
        title="Используйте формат: +375 (33) 333-33-33"
    />
</label>

Валидация input с помощью JavaScript

Теперь будем проверять правильность ввода с помощью JavaScript. С таким подходом можно более оперативно оповещать пользователя о неверном вводе. Повешаем на событие keyup функцию проверки правильности ввода

HTML:

<input type="number" class="myValidate">

Разрешим ввод только цифр:

document.querySelector(".myValidate").addEventListener("keyup", function(){
    this.value = this.value.replace(/[^d]/g, "");
});

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

  • d — только цифры;
  • ^ — инверсия, т.е. получается ^d — не цифры;
  • /g — флаг глобальный поиск.

Т.о., пользователь не сможет ввести отличный от цифр символ.

Пример. Введите любое число:

Используя регулярные выражения можно задать абсолютно любой шаблон для input.

Стилизация верного и неверного поля ввода.

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

Верный ввод:

input:valid {
    border-color: green;
    color: green;
    box-shadow: none;
}

НЕверный ввод:

input:invalid {
    border-color: red;
    color: red;
    box-shadow: none;
}

Верный ввод при фокусе:

input:focus:valid {
    border-color: green;
    color: green;
    box-shadow: none;
}

НЕверный ввод при фокусе:

input:focus:invalid {
    border-color: red;
    color: red;
    box-shadow: none;
}

Верный ввод при фокусе обязательного input:

input:focus:required:valid {
    border-color: green;
    color: green;
    box-shadow: none;
}

НЕверный ввод при фокусе обязательного input

input:focus:required:invalid {
    border-color: green;
    color: green;
    box-shadow: none;
}

Достаточно гибко можно стилизовать поля для ввода с помощью CSS.

Дата обновления статьи 05/01/2022 01:07

Настройка Gulp Babel Кнопки «поделиться» для сайта

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки,
то можете следить за выходом новых статей в Telegram.

  • JavaScript: Работа с Массивами
  • Наличие Динамически Добавленного Элемента
  • Стилизация Input File
  • Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
  • Стилизация Скролла
  • События Формы

If you are not using jQuery then I would simply write a validation method that you can be fired when the form is submitted. The method can validate the text fields to make sure that they are not empty or the default value. The method will return a bool value and if it is false you can fire off your alert and assign classes to highlight the fields that did not pass validation.

HTML:

<form name="form1" method="" action="" onsubmit="return validateForm(this)">
<input type="text" name="name" value="Name"/><br />
<input type="text" name="addressLine01" value="Address Line 1"/><br />
<input type="submit"/>
</form>

JavaScript:

function validateForm(form) {

    var nameField = form.name;
    var addressLine01 = form.addressLine01;

    if (isNotEmpty(nameField)) {
        if(isNotEmpty(addressLine01)) {
            return true;
        {
    {
    return false;
}

function isNotEmpty(field) {

    var fieldData = field.value;

    if (fieldData.length == 0 || fieldData == "" || fieldData == fieldData) {

        field.className = "FieldError"; //Classs to highlight error
        alert("Please correct the errors in order to continue.");
        return false;
    } else {

        field.className = "FieldOk"; //Resets field back to default
        return true; //Submits form
    }
}

The validateForm method assigns the elements you want to validate and then in this case calls the isNotEmpty method to validate if the field is empty or has not been changed from the default value. it continuously calls the inNotEmpty method until it returns a value of true or if the conditional fails for that field it will return false.

Give this a shot and let me know if it helps or if you have any questions. of course you can write additional custom methods to validate numbers only, email address, valid URL, etc.

If you use jQuery at all I would look into trying out the jQuery Validation plug-in. I have been using it for my last few projects and it is pretty nice. Check it out if you get a chance. http://docs.jquery.com/Plugins/Validation

Уведомления

  • Начало
  • » Python для новичков
  • » ошибка input() при вводе текста

#1 Дек. 4, 2016 04:24:21

ошибка input() при вводе текста

Здравствуйте.
Столкнулся с такой проблемой: если в коде ниже ввести буквы то вылетает ошибка “NameError: name ‘a’ is not defined”, если ввести число, то все в порядке.

 a = input("a: ")
print(a)

пробовал преобразовать str(a) не помогает, причем в онлайн интерпретаторах и под виндой работает,но я в Ubuntu16.04 (да и собственно в любой убунту тоже самое).
Запускаю из терминала командой python test.py
Может нужно какой то модуль скачать?
Посоветуйте как быть, чтоб input() строки воспринимал.

Офлайн

  • Пожаловаться

#2 Дек. 4, 2016 04:41:19

ошибка input() при вводе текста

Собственно сам и решил.
Причины и решения:
1. запускал командой python test.py по умолчанию запускалось через версию python 2.7.12
2. в 2.7.12 нужно вместо input() использовать raw_input()
3. при запуске командой python3 test.py input() со стоками работает нормально.

ЗЫ. тему не удаляю, может кому пригодится

Офлайн

  • Пожаловаться

#3 Дек. 4, 2016 09:12:11

ошибка input() при вводе текста

удалено

Читайте что писал автор и не пишете бессмысленные вещи

Отредактировано JOHN_16 (Дек. 4, 2016 10:56:43)

Офлайн

  • Пожаловаться

  • Начало
  • » Python для новичков
  • » ошибка input() при вводе текста

Понравилась статья? Поделить с друзьями:
  • Ошибка еск шкода рапид 2017
  • Ошибка еск шкода октавия а7
  • Ошибка есиа не удалось подготовить соединение с есиа
  • Ошибка ес на кондиционере саката
  • Ошибка ес на кондиционере дексп