diff --git a/src/js/_enqueues/lib/nav-menu.js b/src/js/_enqueues/lib/nav-menu.js index 398f54ecfddc6..e8977428ff12e 100644 --- a/src/js/_enqueues/lib/nav-menu.js +++ b/src/js/_enqueues/lib/nav-menu.js @@ -1103,12 +1103,38 @@ $('#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) { + 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'); + } + }); }, /** diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css index f34a014ac7c33..72c8fb86e7e25 100644 --- a/src/wp-admin/css/nav-menus.css +++ b/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; } diff --git a/src/wp-admin/includes/nav-menu.php b/src/wp-admin/includes/nav-menu.php index c3b1244f47fd9..68212f409a2c3 100644 --- a/src/wp-admin/includes/nav-menu.php +++ b/src/wp-admin/includes/nav-menu.php @@ -351,6 +351,7 @@ function wp_nav_menu_item_link_meta_box() { type="text" class="code menu-item-textbox form-required" placeholder="https://" /> +