Legitimate regex for HTML5 form field validation

Question

Is the following regex:

url: /\b(http|https|ftp):\/\/([-A-Z0-9.]+)(\/[-A-Z0-9+&@#\/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#\/%=~_|!:,.;]*)?/i
email: /\b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,6}\b/i

I am using them in inputs like:

  <section id='email-txt' class='flex-column'>
    <label id='address' for='emailTxt'>Address</label>
    <input id=emailTxt
           type='email'
           value='{{webContact.homeEmail}}'
           pattern=/\b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,6}\b/i>

  </section>


  <section id='col2' class='flex-column'>
    <label id='type' for='webPageUrl'>Type</label>
    <input id=webPageUrl
           type='url'
           value='{{webContact.homeEmail}}'
           placeholder='http://microsoft.com'
           required
           pattern=/\b(http|https|ftp):\/\/([-A-Z0-9.]+)(\/[-A-Z0-9+&@#\/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#\/%=~_|!:,.;]*)?/i>
  </section>

in forms but the validation is always incorrect.

Thanks

Try quoting the pattern attribute; just like you would any other attribute. This isn't a dart problem. — Burhan Khalid
– Burhan Khalid, Commented Dec 15, 2013 at 4:13
Your regex reject abc@xyz that is a valid email address, en.wikipedia.org/wiki/Email_address#Valid_email_addresses — Toto
– Toto, Commented Dec 15, 2013 at 11:13
quoted in single or double quotes - still does not work. Checked the regex with tools and all say its correct. Cannot understand why it does not work. — st_clair_clarke
– st_clair_clarke, Commented Dec 15, 2013 at 13:43

Stephan · Accepted Answer · 2013-12-16 16:03:00Z

1

The word boundaries \b are not pertinent in your case. If you do input fields validation, try those regexes with ^ and $:

url:

/^(http|https|ftp):\/\/([-A-Z0-9.]+)(\/[-A-Z0-9+&@#\/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#\/%=~_|!:,.;]*)?$/i

email:

/^[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,6}$/i

edited Dec 16, 2013 at 16:03

answered Dec 16, 2013 at 15:47

Stephan

43.2k69 gold badges245 silver badges342 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Legitimate regex for HTML5 form field validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related