SOLVED

Form validation for multiple fields

Go to solution
Highlighted
Level 7

Form validation for multiple fields

On occasion people fill out our forms with bad data, for example:

First Name: aaa

Last Name: aaa

Email something@gmail.com

Company Name: aaa

I found this example written by Sandford Whiteman​: https://codepen.io/figureone/pen/JKzjvE, but it's only works for 1 field at a time, attached is my edited code. What edits do I need to make to get this to work on FirstName, LastName, Company and also stop Freemium email addresses? I've tried combining the examples out on the nation but am getting code conflicts or the form submits without checking my rules.

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 10 - Community Moderator

Re: Form validation for multiple fields

I'm this Sanford Whiteman​ actually.

but it's only works for 1 field at a time

Not at all! It's specifically written to be extensible, that's why it says "array of validator objects."

If you wanted to validate both LastName and Website, for example, you'd use:

  var extendedValidators = [

  {

    field: 'LastName',

    pattern: /[0-9]/,

    predicate: false,

    message: 'Last names can\'t have numbers.',

  },

  {

    field: 'Website',

    pattern: /\.example\.com$/i,

    predicate: false,

    message: 'Websites can\'t be example.com sites.',

  }

  ];

Of course this assumes you can express your rules as regular expressions, and not everything fits a regex.  You might want to pass a callback function, which this particular version of the code does not support (I think there's a another demo that does, have to look for it).

In your case, if you want to catch the same character repeated 3 or more times, that's the regex

/(\w)\1{2,}/

But I'd be extremely wary of false positives.  "AAA" is one of the most-well known brands in America, and lots of of small companies prepend "AAA" to their name. For personal names I guess it's pretty sound, but it's hardly the only way to come up with a fake name.

View solution in original post

4 REPLIES 4
Highlighted
Level 10 - Community Moderator

Re: Form validation for multiple fields

I'm this Sanford Whiteman​ actually.

but it's only works for 1 field at a time

Not at all! It's specifically written to be extensible, that's why it says "array of validator objects."

If you wanted to validate both LastName and Website, for example, you'd use:

  var extendedValidators = [

  {

    field: 'LastName',

    pattern: /[0-9]/,

    predicate: false,

    message: 'Last names can\'t have numbers.',

  },

  {

    field: 'Website',

    pattern: /\.example\.com$/i,

    predicate: false,

    message: 'Websites can\'t be example.com sites.',

  }

  ];

Of course this assumes you can express your rules as regular expressions, and not everything fits a regex.  You might want to pass a callback function, which this particular version of the code does not support (I think there's a another demo that does, have to look for it).

In your case, if you want to catch the same character repeated 3 or more times, that's the regex

/(\w)\1{2,}/

But I'd be extremely wary of false positives.  "AAA" is one of the most-well known brands in America, and lots of of small companies prepend "AAA" to their name. For personal names I guess it's pretty sound, but it's hardly the only way to come up with a fake name.

View solution in original post

Highlighted
Level 7

Re: Form validation for multiple fields

Thanks this worked as expected, for now I'm keeping it to the First, Last and Email fields, as you're totally correct on the Company Name side.

Highlighted

Re: Form validation for multiple fields

We are receiving a lot of invalid emails that don't have for example ".com" - how do you account for all the different email extensions... ie.  .net, .org, .edu etc.... do you have code the lists all of these to verify that the email is valid?

Highlighted
Level 10 - Community Moderator

Re: Form validation for multiple fields

Lorie, bear in mind there are over 1500 valid TLDs, and that number grows all the time. To not falsely block people you must continually update from the PSL. (Few form design mistakes enrage me more than when people block "new" domains as if they're invalid.) And also realize that No, sandy@gmail isn’t an “incomplete” e-mail address!​.

This is not to say you can't match against the TLD list. If you're ready to maintain such a solution at least every month, it's not hard to read a downloaded PSL from JavaScript. But even matching one of the currently valid TLDs doesn't mean the email is emailable, just that it may be emailable. In order to know that the @domain exists (not just that it may exist) and has an MX record, you'd need to use another solution that does real-time verification.