Простая проверка JavaScript, которая мешает пользователю отправлять форму при вводе неверного формата даты?

0

Я ищу это сейчас довольно долго, но не получил достаточно хороших ответов.

Механизм проверки jquery имеет недостатки imho. Использование атрибута class для размещения правил проверки выглядит наоборот.

Я хочу что-то сверхлегкое, что:

Отображает небольшое сообщение об ошибке, а также останавливает пользователя от отправки формы.

Ошибка, которую выполняет пользователь, следующая. Он вставляет в поле даты, затем вводит неверный формат вручную, а затем отправляет форму.

Смотрите эту скрипку

Код:

    <input id="first" type="text" value="" /> 
 <input id="hello" type="text" value="234.12.1984" />



$("#hello").datepicker();

$("#first").focus();
  • 0
    Работа Fiddle, которая делает textbox readonly , не позволит пользователю вручную редактировать значение и, следовательно, сделает его действительным всегда ...
  • 1
    хорошо, что это правда, но случай использования заключается в том, что пользователь вручную вводит дату. Честно говоря, принуждение людей использовать средство выбора даты, когда они могут ввести дату через 2 секунды вручную, является просто плохим опытом пользователя.
Показать ещё 7 комментариев
Теги:
validation
forms

2 ответа

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

Добавьте (первоначально скрытое) сообщение об ошибке (скажем, с идентификатором "ошибка") и попробуйте сделать следующее:

$('form').submit(function(event){
    try{
        var d = $('#hello');
        $.datepicker.parseDate(d.datepicker( "option", "dateFormat" ), d.val());
    }catch(e){
        event.preventDefault();
        $('#error').show();
        return false;
    }
});

(Может быть, с классом /id, чтобы сказать, какую форму, конечно). Рабочая скрипка

редактировать

В ответ на комментарий ОП было принято, что действительные даты, отсутствующие в начале ноля на день/месяц, были приняты, мое предложение было бы просто исправить такие даты. Я думаю, что это более удобно, чем бросать ошибку на действительную дату. Например, измените блок try на

var format = d.datepicker( "option", "dateFormat" );
var tmp_date = $.datepicker.parseDate(format, d.val());
d.val( $.datepicker.formatDate(format, tmp_date) );

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

Поделиться
  • 0
    проблема с вашим подходом заключается в том, что анализатор datepickers не будет выдавать ошибку, когда, например, date должна быть dd.mm.yy (что эквивалентно, например, 13.09.2014, но не 13.09.14) jsfiddle.net/6WAjs/2
  • 0
    @Toskan: см. Мое редактирование. В качестве альтернативы вы можете использовать просто регулярное выражение. Лично я предпочитаю такой подход, потому что формат устанавливается только один раз (при вызове $("#hello").datepicker() - или не устанавливается, вы просто используете дату по умолчанию). Использование регулярного выражения означает, что вам нужно синхронизировать формат даты и регулярное выражение. Немного зависит от варианта использования - в моей работе мне приходится беспокоиться о интрационализации, чтобы форматы дат и т. Д. Становились достаточно быстрой болью, если вы не будете осторожны.
1

Working Fiddle

<input type="text" class="date" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="using pattern" title="dd/mm/yyyy or mm/dd/yyyy"/>

Единственным признаком, который он распознает, является dd/mm/yyyy or mm/dd/yyyy

Обновить
This answer может вам помочь.

Надеюсь, поможет..!

Поделиться
  • 0
    это круто, не знал об атрибуте шаблона. Стыдно так мало поддерживается. Например, нет поддержки сафари, нет IE <поддержка IE10
  • 0
    На самом деле не подтверждает, что это действительная дата. 22/22/0000 соответствует шаблону. Как и 99/99/9999
Показать ещё 11 комментариев

Ещё вопросы

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