Validate a URL with Regex in Ionic

Question

I am working on an Ionic app and trying to create a regular expression to match a website URL for some form validation. Here is the regex I am using:

^((http|ftp|https):\/\/)?([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?$

While I know that this is not a “perfect” regex for validating a URL, I am getting inconsistencies between using the regex in ionic vs. my web tests.

For example, i plugged the same regex into http://www.regex101.com and several examples are working just fine:

http://www.google.com

google.com

www.google.com

However, when I run my ionic app, none of my patterns are matching.

I know that I am using Validators.pattern() properly because I have already added a regex validator for email inputs. I also know that I’m using it properly because I am able to plug in simple regex patterns, like http and the validation works fine.

Somewhere along the way, the Ionic pattern is failing to parse as a normal regex would. Perhaps my pattern is using a character that Ionic does not recognize or parses differently?

Is there something about using regex in Ionic that I am missing?

Here is how I am setting up the validations for my various form controls. Note that the pattern for organizerEmail is working.

let formGroup: FormGroup = this.formBuilder.group({
  title: ['', Validators.required],
  venue: ['', Validators.required],
  streetAddress: ['', Validators.required],
  city: ['', Validators.required],
  zipCode: ['', Validators.required],
  price: [''],
  description: ['', Validators.compose([Validators.maxLength(this.descriptionMax), Validators.required])],
  eventUrl: ['', Validators.compose([Validators.pattern('^((http|ftp|https):\/\/)?([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?$'), Validators.required])],
  contactName: ['', Validators.required],
  organizerEmail: ['', Validators.compose([Validators.pattern('^[a-zA-Z0-9._]+[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$'), Validators.required])],
  phoneNumber: [''],
});

Here is the HTML input uses the form control:

 <ion-item>
    <ion-label stacked color="light">Website</ion-label>
    <ion-input formControlName="eventUrl" type="url" placeholder="Website"></ion-input>
  </ion-item>

Note that the pattern for organizerEmail is working. - it does not work correctly. Escape all \ again. Replace \/ with /. Remove ^ and $. E.g. Validators.pattern('^((http|ftp|https)://)?([\\w_-]+(?:(?:\\.[\\w_-]+)+))([\\w.,@?^=%&:/~+#-]*[\\w@?^=%&/~+#-])?$') — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Feb 27, 2018 at 16:11
Just a couple of notes: https? matches both http and https, is quicker and shorter. The token \w includes _, so you don't need to add it to the character class. — ctwheels
– ctwheels, Commented Feb 27, 2018 at 16:18
@WiktorStribiżew That did it! It was the escaping the backslash that I was missing. — chemoroti
– chemoroti, Commented Feb 27, 2018 at 16:46
@WiktorStribiżew If you want to submit an answer I will choose it. — chemoroti
– chemoroti, Commented Mar 1, 2018 at 14:58

Wiktor Stribiżew · Accepted Answer · 2018-03-01 15:04:38Z

3

You may fix the pattern by escaping the backslashes and you may remove the anchors as they are implicitly added by the engine. You may also remove unnecessary groups.

Use

Validators.pattern('(?:(?:(?:ht|f)tp)s?://)?[\\w_-]+(?:\\.[\\w_-]+)+([\\w.,@?^=%&:/~+#-]*[\\w@?^=%&/~+#-])?')

Here is the regex demo.

The email checking regex must escape the . correctly, too:

Validators.pattern('[a-zA-Z0-9._]+[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}')

answered Mar 1, 2018 at 15:04

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

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

Collectives™ on Stack Overflow

Validate a URL with Regex in Ionic

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