feat: add error for when the URL is invalid

Author: DarkMatter-999

src/js/media/views/embed/url.js

@@ -14,7 +14,7 @@ var View = wp.media.View,
  * @augments Backbone.View
  */
 EmbedUrl = View.extend(/** @lends wp.media.view.EmbedUrl.prototype */{
-	tagName:   'span',
+	tagName:	 'span',
 	className: 'embed-url',
 
 	events: {
@@ -28,7 +28,13 @@ EmbedUrl = View.extend(/** @lends wp.media.view.EmbedUrl.prototype */{
 		this.input = this.$input[0];
 
 		this.spinner = $('<span class="spinner" />')[0];
-		this.$el.append([ this.input, this.spinner ]);
+
+		this.error = $('<div class="notice notice-error embed-url-error"><p></p></div>')[0];
+
+		this.$error = $(this.error);
+		this.$error.hide();
+
+		this.$el.append([ this.input, this.spinner, this.error ]);
 
 		this.listenTo( this.model, 'change:url', this.render );
 
@@ -62,8 +68,32 @@ EmbedUrl = View.extend(/** @lends wp.media.view.EmbedUrl.prototype */{
 	},
 
 	url: function( event ) {
-		var url = event.target.value || '';
-		this.model.set( 'url', url.trim() );
+		var $el = $( event.target );
+		var url = $el.val() || '';
+
+		if ( this.isValidUrlInput( event.target ) ) {
+			this.model.set( 'url', url.trim() );
+			this.$error.hide();
+		} else {
+			if ( url.length > 0 ) {
+				this.model.set( 'url', '' );
+				this.$error.find( 'p' ).text( l10n.invalidUrl );
+				this.$error.show();
+			} else {
+				this.$error.hide();
+			}
+		}
+	},
+
+	isValidUrlInput: function ( el ) {
+		var url = ( el.value || '' ).trim();
+
+		var isNativeValid = el.validity ? el.validity.valid : true;
+
+		var pattern = /^(https?:\/\/)([\w.-]+)+(:\d+)?(\/.*)?$/i;
+		var isRegexValid = pattern.test( url );
+
+		return isNativeValid && isRegexValid;
 	}
 });
 

src/wp-includes/css/media-views.css

@@ -2118,6 +2118,10 @@
 	right: 26px;
 }
 
+.media-frame .embed-url-error {
+	margin: 4px 0;
+}
+
 .media-frame .embed-loading .embed-url .spinner {
 	visibility: visible;
 }

src/wp-includes/media.php

@@ -5076,6 +5076,7 @@ function wp_enqueue_media( $args = array() ) {
 
 		// From URL.
 		'insertFromUrlTitle'          => __( 'Insert from URL' ),
+		'invalidUrl'                  => __( 'Please enter a valid URL.' ),
 
 		// Featured Images.
 		'setFeaturedImageTitle'       => $post_type_object->labels->featured_image,
@@ -6446,4 +6447,3 @@ function wp_get_image_editor_output_format( $filename, $mime_type ) {
 	 */
 	return apply_filters( 'image_editor_output_format', $output_format, $filename, $mime_type );
 }
-