Confirm the validity of a web address

Question

Confirm the validity of a web address

At the moment, I am utilizing Angular 5 and attempting to validate a URL in the following manner:

Here is the HTML code snippet:

<div class="form-group col-sm-6">
  <input formControlName="s_url" type="url" class="form-control" id="kk" placeholder="url">
  <error-display [displayError]="isValid('s_url')" errMsg="This field is required!"></error-display>
</div>

Within the validate.ts file, you will find this pattern for validation:

s_url: new FormControl('', [
  Validators.required,
  Validators.pattern("/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/")
]),

However, even when entering a correct URL, an error message still displays due to the pattern.

angular forms typescript

Answer 1

Answer №1

If you want to improve your regex, consider making slight modifications and separating it into different parts:

const reg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
...
Validators.pattern(reg)

Based on personal experience, using quotes (") and slashes (/) directly in the regex could potentially cause issues with the pattern matching when applied to .pattern()

Check out this functional Demo

Answer 2

If you want to improve your regex, consider making slight modifications and separating it into different parts:

const reg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
...
Validators.pattern(reg)

Based on personal experience, using quotes (") and slashes (/) directly in the regex could potentially cause issues with the pattern matching when applied to .pattern()

Check out this functional Demo

Answer 3

Answer №2

My revised regex pattern covers more cases:

const urlRegexPattern = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/;
this.form = this.fb.group({
      s_url: ['', [Validators.required, Validators.pattern(urlRegexPattern)]],
    });

For further testing of the pattern, you can visit here

Answer 4

My revised regex pattern covers more cases:

const urlRegexPattern = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/;
this.form = this.fb.group({
      s_url: ['', [Validators.required, Validators.pattern(urlRegexPattern)]],
    });

For further testing of the pattern, you can visit here

Answer 5

Answer №3

Utilizing the URL API can be beneficial, especially since it currently has a support rate of 95%. You can check the browser support details here

urlValidation: ValidatorFn = (control: AbstractControl) => {
    let isUrlValid = true;

    try {
      new URL(control.value)
    } catch {
      isUrlValid = false;
    }

    return isUrlValid ? null : { invalidUrl: true };
  }

  inputControl = this.fb.control(null, this.urlValidation);

Answer 6

Utilizing the URL API can be beneficial, especially since it currently has a support rate of 95%. You can check the browser support details here

urlValidation: ValidatorFn = (control: AbstractControl) => {
    let isUrlValid = true;

    try {
      new URL(control.value)
    } catch {
      isUrlValid = false;
    }

    return isUrlValid ? null : { invalidUrl: true };
  }

  inputControl = this.fb.control(null, this.urlValidation);

Answer 7

Answer №4

To meet your specific needs, let's say you prefer not to handle or manage a RegExp for a URL, you have the option to entrust this task to the browser's built-in form validation feature.

You can achieve this by doing the following:

const inputField: HTMLInputElement = document.createElement("input");
inputField.type = "url";
inputField.value = value;
const isValidURL: boolean = inputField.checkValidity();

Answer 8

To meet your specific needs, let's say you prefer not to handle or manage a RegExp for a URL, you have the option to entrust this task to the browser's built-in form validation feature.

You can achieve this by doing the following:

const inputField: HTMLInputElement = document.createElement("input");
inputField.type = "url";
inputField.value = value;
const isValidURL: boolean = inputField.checkValidity();

Answer 9

Answer №5

Compatible with all web browsers using the new URL() standard URL validator. This function creates and retrieves a URL object that points to the specified URL by utilizing an absolute URL string or a combination of relative and base URL strings.

function checkValidUrl(input) {
    let isValid = true;
    try {
        if (input) {
           let urlObject = new URL(input);
           if(urlObject.host == "" && urlObject.origin == "null"){
            isValid = false;
           }
        }
    } catch {
        isValid = false;
    }
    return isValid ? null : { invalidUrl: true };
}

Answer 10

Compatible with all web browsers using the new URL() standard URL validator. This function creates and retrieves a URL object that points to the specified URL by utilizing an absolute URL string or a combination of relative and base URL strings.

function checkValidUrl(input) {
    let isValid = true;
    try {
        if (input) {
           let urlObject = new URL(input);
           if(urlObject.host == "" && urlObject.origin == "null"){
            isValid = false;
           }
        }
    } catch {
        isValid = false;
    }
    return isValid ? null : { invalidUrl: true };
}

Answer 11

Answer №6

I experimented with several regular expressions to validate a URL that I knew was correct, but none of them seemed to work. However, since browsers are already capable of parsing URLs, I opted to create a custom validation function using that API:

export class CustomValidators {
  static validUrl: ValidatorFn = (control: FormControl): ValidationErrors | null  => {
    try {
      let str = control.value;
      if (str.indexOf('://') === -1) {
        str = `https://${str}`;
      }
      const url = new URL(str);
      return null;
    } catch (_) {
      return { invalidUrl: true };
    }
  }
}

You can then use it just like any of the built-in validators:

this.fb.group({
  url: ['', [CustomValidators.validUrl]]
})

Answer 12

I experimented with several regular expressions to validate a URL that I knew was correct, but none of them seemed to work. However, since browsers are already capable of parsing URLs, I opted to create a custom validation function using that API:

export class CustomValidators {
  static validUrl: ValidatorFn = (control: FormControl): ValidationErrors | null  => {
    try {
      let str = control.value;
      if (str.indexOf('://') === -1) {
        str = `https://${str}`;
      }
      const url = new URL(str);
      return null;
    } catch (_) {
      return { invalidUrl: true };
    }
  }
}

You can then use it just like any of the built-in validators:

this.fb.group({
  url: ['', [CustomValidators.validUrl]]
})

Answer 13

Answer №7

Follow this simple method.

Start by downloading and installing the ng2-validation library.

npm install ng2-validation --save

Remember to inject it in your code. Import the library into your app.module.ts file under the import array section

import { CustomFormsModule } from 'ng2-validation'

Make sure to include it in the import array as well,

imports: [BrowserModule, FormsModule, CustomFormsModule],

Next, update your code as shown below

<div class="form-group col-sm-6">
  <input formControlName="s_url" type="url" class="form-control" id="kk" url placeholder="url">

  <div *ngIf="imageUrl.touched && imageUrl.invalid" >
     <div *ngIf="imageUrl.errors.required"> This field is required!</div>
     <div *ngIf="imageUrl.errors.url"> invalid URL </div>
  </div>

</div>

Answer 14

Follow this simple method.

Start by downloading and installing the ng2-validation library.

npm install ng2-validation --save

Remember to inject it in your code. Import the library into your app.module.ts file under the import array section

import { CustomFormsModule } from 'ng2-validation'

Make sure to include it in the import array as well,

imports: [BrowserModule, FormsModule, CustomFormsModule],

Next, update your code as shown below

<div class="form-group col-sm-6">
  <input formControlName="s_url" type="url" class="form-control" id="kk" url placeholder="url">

  <div *ngIf="imageUrl.touched && imageUrl.invalid" >
     <div *ngIf="imageUrl.errors.required"> This field is required!</div>
     <div *ngIf="imageUrl.errors.url"> invalid URL </div>
  </div>

</div>

Answer 15

Answer №8

Try using the following regular expression: /^(http[s]?://){0,1}(www\.){0,1}[a-zA-Z0-9\.-]+\.[a-zA-Z]{2,5}\.{0,1}/

This regex pattern is designed to match various types of URLs

Answer 16

Try using the following regular expression: /^(http[s]?://){0,1}(www\.){0,1}[a-zA-Z0-9\.-]+\.[a-zA-Z]{2,5}\.{0,1}/

This regex pattern is designed to match various types of URLs

Answer 17

Answer №9

Specifically for URLs with the www prefix:

www.yahoo.com - correct
yahoo.com - incorrect

- Incorrect

(www)\\.([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?

Answer 18

Specifically for URLs with the www prefix:

www.yahoo.com - correct
yahoo.com - incorrect

- Incorrect

(www)\\.([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?

Answer 19

Answer №10

If you are in search of a regular expression that verifies whether a URL starts with "https" but not with "http" or any other variation, and allows for queries and all types of URLs, look no further:

/^https:\/*(?:\w+(?::\w+)?@)?[^\s\/]+(?::\d+)?(?:\/[\w#!:.?+=&%@\-\/]*)?$/

You can utilize the following website to customize it according to your requirements: https://regex101.com/

Answer 20

If you are in search of a regular expression that verifies whether a URL starts with "https" but not with "http" or any other variation, and allows for queries and all types of URLs, look no further:

/^https:\/*(?:\w+(?::\w+)?@)?[^\s\/]+(?::\d+)?(?:\/[\w#!:.?+=&%@\-\/]*)?$/

You can utilize the following website to customize it according to your requirements: https://regex101.com/

Answer 21

Answer №11

/**
 * The regular expression provided here is designed to identify URLs that begin with optional protocols (http://, https://, or ftp://),
 * followed by a domain name, domain extension, and a variety of characters that make up the path, query, or fragment portion of
 * the URL. It also allows for `%` as a valid character (for encoded characters).
 *
 * Reference: https://regexr.com/7q3qi
 */
const CUSTOM_URL_PATTERN: RegExp = /^(?:(?:http|https|ftp):\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=%]+$/;

Answer 22

/**
 * The regular expression provided here is designed to identify URLs that begin with optional protocols (http://, https://, or ftp://),
 * followed by a domain name, domain extension, and a variety of characters that make up the path, query, or fragment portion of
 * the URL. It also allows for `%` as a valid character (for encoded characters).
 *
 * Reference: https://regexr.com/7q3qi
 */
const CUSTOM_URL_PATTERN: RegExp = /^(?:(?:http|https|ftp):\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=%]+$/;

Answer 23

Answer №12

Here is a regular expression you can use:

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

Answer 24

Here is a regular expression you can use:

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

Confirm the validity of a web address

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Answer №11

Answer №12

Similar questions

What might be causing the component in Angular and TypeScript to have trouble reading the data returned by the service?

Sorting an array of objects in Typescript using a dynamic property name for generics

Modify the internal class style to set overflow property to visible for a particular class in PrimeNG

Explore the world of watching and references using typescript and vue-property-decorator

Keycloak Redirect URI Error: Page Not Found

How to safely install npm packages without overwriting any custom changes made to existing node modules

Unable to locate the main source for loading

Sorting custom folders and files in an Angular Material table is a breeze with this handy feature

Odd Behavior when altering button attribute using Jquery

Encountering an error while unit testing Angular components with MatDialog: "Error: <spyOn>: open has already been spied upon."

Validation of Date in Angular 5 (with specified minimum and maximum dates)

Refreshing manually will display only the JSON data

Is 'not set' in Google Analytics indicating the browser version?

What is the best way to implement a generic parameter with constraints in an abstract method?

Finding a solution to the dilemma of which comes first, the chicken or the egg, when it comes to using `tsc

Identify the appearance of a web component being added to the Document Object

Error: The flash messages cannot be shown upon form submission

What is the best way to simulate mailgun.messages().send() with Jest?

The sort icon in PrimeNG TurboTable is not displayed when the default sorting option is activated

Matching only the specified Records in an array of Typescript generic objects