Add error message under input field.

src/js/_enqueues/lib/nav-menu.js

@@ -1103,12 +1103,39 @@
 
 			$('#add-custom-links input[type="text"]').on( 'keypress', function(e){
 				$('#customlinkdiv').removeClass('form-invalid');
+				$('#custom-menu-item-url').hide();
 
 				if ( e.keyCode === 13 ) {
 					e.preventDefault();
 					$( '#submit-customlinkdiv' ).trigger( 'click' );
 				}
 			});
+
+			$('#submit-customlinkdiv').on('click', function (e) {
+				var urlInput = $('#custom-menu-item-url'),
+					url = urlInput.val().trim(),
+					errorMessage = $('#custom-url-error'),
+					urlWrap = $('#menu-item-url-wrap');
+
+				// Hide the error message initially
+				errorMessage.hide();
+				urlWrap.removeClass('has-error');
+
+				if ('' === url || 'https://' === url || 'http://' === url) {
+					console.log(url);
+					e.preventDefault();
+					urlInput.addClass('form-invalid')
+						.attr('aria-invalid', 'true')
+						.attr('aria-describedby', 'custom-url-error');
+
+					var errorText = wp.i18n.__('No content entered. Please enter a valid link.');
+					errorMessage.show();
+					urlWrap.addClass('has-error');
+
+					// Announce error message via screen reader
+					wp.a11y.speak(errorText, 'assertive');
+				}
+			});
 		},
 
 		/**

src/wp-admin/css/nav-menus.css

@@ -377,7 +377,8 @@ input.bulk-select-switcher:focus + .bulk-select-button-label {
 
 /* Add Menu Item Boxes */
 .postbox .howto input,
-.customlinkdiv .menu-item-textbox {
+.customlinkdiv .menu-item-textbox,
+.customlinkdiv .error-message {
 	width: 180px;
 	float: right;
 }

src/wp-admin/includes/nav-menu.php

@@ -351,6 +351,7 @@ function wp_nav_menu_item_link_meta_box() {
 				type="text"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?>
 				class="code menu-item-textbox form-required" placeholder="https://"
 			/>
+			<span id="custom-url-error" class="error-message" style="display: none;"><?php _e( 'No content entered. Please enter a valid link.' ); ?></span>
 		</p>
 
 		<p id="menu-item-name-wrap" class="wp-clearfix">