Working with input and validation for URLs in Web Apps.

Question

Good evening,
I am trying to input Url(s) in a form in a Razor Page application. My first issue I have run into is that the validation is not working correctly. If I enter in https://localhost:44003/api/ in the form I am immediately getting a validation error: The Redirect Uri(s) field is not a valid fully-qualified http, https, or ftp URL.

In the class that the page references I have the following:
public class InputModel
{
[Required]
public string ClientId { get; set; }
[Required]
public string DisplayName { get; set; }
[Required]
[Url]
[Display(Name = "Redirect Uri(s)")]
public Uri RedirectUris { get; set; }
}

My input on the page is as follows:
<div class="form-group">
<label asp-for="Input.RedirectUris"></label>
<input asp-for="Input.RedirectUris" class="form-control"/>
<span asp-validation-for="Input.RedirectUris" class="text-danger"></span>
</div>

Should I be using the Uri data annotation for validation of the field? Also, I am looking at possibly changing the property to a string so that I can use comma separated values to enter multiple Urls. I am doubting the Uri data annotation would work with comma separated values, so that leads to the second question of what sort of validation would work best with what I am looking to do?

Answer 1

Hi @Michael Mastro II ,

As far as I know, the client validation will use jquery.validate.js to validate the url. The validate regex like below: After checking this regex, you will find it doesn't support localhost, it needed the url is something link xxxx.xx format. This is the reason why your url validate is not working well. Since in the production environment the localhost will not work well when you let the url type in a localhost, localhost normally means the local develop environment.

Js validate for url checking part:

			return this.optional( element ) || /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test( value );  

Also, I am looking at possibly changing the property to a string so that I can use comma separated values to enter multiple Urls. I am doubting the Uri data annotation would work with comma separated values, so that leads to the second question of what sort of validation would work best with what I am looking to do?

The url validate will just work for just on url, if you put multiple url inside it, it will not work well. If you have the specific requirement, you should write the regex by your-self.