Проверьте HTML5 форму с Jquery и Modernizr в IE9

Question

Я создаю форму HTML5, к сожалению, свойство заполнителя не работает в IE9.Modernizr помог мне решить, но проблема с Modernizr заключается в том, что в качестве входного значения создается свойство заполнителя, это ограничивает меня для проверки того, что поля пусты.

Чтобы решить эту проверку, я создал следующий код:

$(".button").click(function(){
  var reEmail = /^[A-Za-z0-9][a-zA-Z0-9._-][A-Za-z0-9]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
  var email = $("#email");
  var name = $("#name");
  if (name.val()=="Name [Required]" && name.val()==""){
     name.val("");
     name.focus();
  } else if (email.val()=="Email [Required]" && email.val()==""){
     email.val("");
     email.focus();
  } else if (!reEmail.test(email)){
      email.val("");
      email.focus();
  } else{
      alert("Thanks!");
  }
});

Но это не работает, даже если адрес электронной почты правильный

Примечание: извините за мой английский и мой код JS, я все еще учусь:)

Answer 1

Есть несколько проблем с вашим кодом.

flynfish уже определили 2 наиболее важных:).

Ошибка:

1. name is placeholder *OR* is empty, а не name is placeholder *AND* is empty

2. изменить (!reEmail.test(email)) на (!reEmail.test(email.val())) для проверки значения

3. Ваше регулярное выражение допускает ., _ и - только в качестве 2-го символа. Вы также не экранируете ., что означает любой символ, а не только точку. Также экранируйте -, потому что JSLint / JSHint ненавидит, когда он не экранирован:).

Оптимизация:

1. Вам не нужно проверять, является ли электронная почта заполнителем или пустой строкой, потому что эти два неверных значения не пройдут тест регулярного выражения.

2. Не указывайте значения местозаполнителя в коде JS. Вы можете получить доступ к значению заполнителя, используя name.attr('placeholder'). Таким образом, если вы изменяете текст заполнителя, вам не нужно изменять JavaScript.

3. Я бы предложил использовать новый элемент <input type="email"> и использовать Moderznir с любой из форм html5 polyfils с поддержкой ввода электронной почты. Это сделает вашу работу намного проще. Вы уже используете moderznizr и polyfills для заполнителя, поэтому проверьте, не поддерживает ли он также проверку входных данных электронной почты.

Answer 2

Если у вас все еще возникают трудности, я предлагаю вам использовать этот небольшой скрипт jQuery:

http://uniquemethod.com/html5-placeholder-text-with-modernizr-and-jquery-fallback

Он отлично работает с моей формой MailChimp в IE9.

Answer 3

Я вижу несколько вещей, которые не соответствуют вашему коду:

1. вы проверяете, равно ли значение val "Email [обязательно] и пустой строке ... это недопустимо, потому что они не могут быть оба одновременно.

2. В тесте электронной почты вам нужно протестировать email.val (), а не селектор jquery

   (!reEmail.test(email)) должно быть (!reEmail.test(email.val()))