Question

Im creating a HTML5 form, unfortunately the placeholder property does not work in IE9. Modernizr helped me solve, but the problem wiht Modernizr is that creates placeholder property as an input value, this limits me to validate that the fields are empty.

To solve the validation, i created the following code:

$(".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!");
  }
});

But this does not work even if the email is correct

Note: sorry for my English and my JS code, I’m still learning 🙂

Answer 1

There are several problems with your code.

flynfish already identified the 2 most important ones :).

Errors:

1. name is placeholder *OR* is empty and not name is placeholder *AND* is empty

2. change (!reEmail.test(email)) to (!reEmail.test(email.val())) to check value

3. Your regular expression allows ., _ and - only as a 2nd character. You are also not escaping . so it means any character and not only a dot. Also escape - because JSLint/JSHint hates when it is unescaped :).

Optimizations:

1. You don’t have to check if email is placeholder or empty string, because those two incorrect values won’t pass the regexp test.

2. Don’t hardcode placeholder values in the JS code. You can access the placeholder value by using name.attr('placeholder'). That way if you change the placeholder text you don’t have to modify JavaScript.

3. I would suggest using new <input type="email"> element and using Moderznir with any of the html5 forms polyfils supporting email input. That will make your job a lot easier. You are already using moderznizr and polyfills for placeholder, so check if it doesn’t support also email inputs validation.