3

Okay so I'm kind of new to regexps in general, let alone in Javascript.
I am trying to work on a form validation project and I found a site where they have a list of useful sample regexps for various things here which has a few for email validation, which is what I'm attempting at the moment.
Anyway, following this example for form validation on w3schools I was able to get it working properly using their example and the regexp works outside of the javascript function, but for some reason when I call it inside the function it returns a value of undefined.
Here's my code:

<html>
  <head>
    <title>formzz validate-jons</title>
      <script type="text/javascript">
        pattern = new RegExp("^[0-9a-zA-Z]+@[0-9a-zA-z]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$");

        function valid8email(field, txt)
        {
          with(field)
          {
            //at_pos = value.indexOf('@');
            //dot_pos = value.lastIndexOf('.');

            if(!pattern.test(value)) //at_pos < 1 || (dot_pos - at_pos) < 2)
            {
              alert(txt);
              return false;
            }
            else
            {
              return true;
            }
          }
        }

        function valid8(form)
        {
          with(form)
          {
            if(valid8email(email, "you must enter an email address") == false)
            {
              email.focus();
              return false;
            }
          }
        }
      </script>
    </head>
    <body>
      <form action="#" method="POST" onsubmit="return valid8(this)">

        Email: <input type="text" name="email" size="30" />
        <input type="submit" value="clicky-click" />

    </form>

    <script type="text/javascript">
      alert(pattern.test(""));
    </script>
  </body>
</html>

Okay... so the alert in the script tags inside the body works just fine.

I've done numerous tests inside the javascript function itself and checked various things:

  • the type of 'value' is String
  • the function returns 'undefined' when called inside the javascript
  • the regex itself works fine as it will return true when the proper formatting is entered in the script tags below

So what could the issue be? I am confused.

邪悪歌
  • 41
  • 3
  • 5
    Outside of a dog, a book is a man’s best friend; inside of a dog, it’s too dark to read anyway. – tchrist Dec 01 '10 at 00:12
  • 5
    `with` is _evil_. **Do not use it**. – SLaks Dec 01 '10 at 00:16
  • 4
    That's a terrible regex; stop using that site! – Pointy Dec 01 '10 at 00:17
  • +1 for the question, haven't seen anyone hit issues with the `pattern` attribute yet :) – Nick Craver Dec 01 '10 at 00:25
  • @Pointy: *which* site? I just saw w3schools.com learned him that [horrible kind of form validation](http://www.w3schools.com/js/js_form_validation.asp). Can't that site be thrown off the internet? – Marcel Korpel Dec 01 '10 at 00:34
  • That site with the list of "useful sample regexps". It really looks totally misguided. – Pointy Dec 01 '10 at 00:37
  • 2
    To specify *why* that's a terrible regex: here's an address like one I use which won't get matched: `myemail+yoursite@example.com`. Or `myemail@some.subdomain.example.com`. Or many, many others. Regular expressions are the wrong tool for validating email addresses; [this regex/monstrosity](http://www.ex-parrot.com/pdw/Mail-RFC822-Address.html) for validating them, which *still* isn't perfectly correct (though pretty much is), illustrates why. – Antal Spector-Zabusky Dec 01 '10 at 01:06
  • @Antal – I agree that regex is not the best tool for email address validation, but the one featured [here](http://fightingforalostcause.net/misc/2006/compare-email-regex.php) seems to work reasonably well (also using JavaScript's RegEx). – Marcel Korpel Dec 01 '10 at 14:31

1 Answers1

8

The problem is that pattern refers to field.pattern (an HTML5 attribute) because you're using it inside the with(), and that's a string, not your regex. If you called it something else like pattern1, it would work fine.

That being said, don't use with in the first place, and you won't have these issues :)

The non-with version looks like this:

var pattern = new RegExp("^[0-9a-zA-Z]+@[0-9a-zA-z]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$");

function valid8email(field, txt) {
    if (!pattern.test(field.value))
    {
        alert(txt);
        return false;
    }
    else {
        return true;
    }
}

function valid8(form) {
    if (valid8email(form.email, "you must enter an email address") == false) {
        form.email.focus();
        return false;
    }
}

You can test it out here.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 1
    Why do you use `new RegExp` instead of a literal? – Marcel Korpel Dec 01 '10 at 00:41
  • 1
    @Marcel - I didn't change it from the OP's code...my objecting was to point out what the issue was and why (the HTML5 attribute combined with the `with` block), not re-write the code :) – Nick Craver Dec 01 '10 at 00:43