Enhance site title validation: add required attribute and error handling for empty input

[sahil-gidwani]

Trac Ticket: https://core.trac.wordpress.org/ticket/63548

---

This PR introduces a client-side validation mechanism for the Site Title (Blog Name) field on the WordPress General Settings screen (options-general.php). The goal is to ensure that site administrators do not leave the field empty, as this has serious implications for:

• SEO performance
• Accessibility (screen readers rely on a proper site name)
• Theme compatibility and proper display
• General user experience

Despite the importance of this field, no validation or instructional guidance currently exists.

Changes Introduced

1. HTML Attribute Update in options-general.php

Added the required attribute to the <input> element for the Site Title field:

<input required name="blogname" type="text" id="blogname" value="<?php form_option( 'blogname' ); ?>" class="regular-text" />

This ensures modern browsers offer native validation out of the box.

2. Custom JavaScript Validation in options.php

Hooked into admin_head via:

add_action( 'admin_head', 'options_general_add_js' );

Then added jQuery-based validation script to provide enhanced UX and fallback behavior.

Key logic implemented:

• Prevent form submission if Site Title is blank.
• Append custom error message styled in red under the field.
• Scroll and focus to the invalid field.
• Remove error state as soon as the user starts typing.

Validation JS snippet:

$('form').on('submit', function(e) {
    var $blogname = $('#blogname');
    var siteTitle = $.trim($blogname.val());

    $('.site-title-error').remove();
    $blogname.removeClass('form-invalid');

    if (!siteTitle) {
        e.preventDefault();
        $blogname.addClass('form-invalid');
        $blogname.closest('td').append(
            '<p class="site-title-error" style="color: #d63638; margin-top: 5px;">' +
            '<?php esc_html_e( 'Site title is required and cannot be empty.' ); ?>' +
            '</p>'
        );
        $blogname.focus();
        $('html, body').animate({ scrollTop: $blogname.offset().top - 100 }, 500);
        return false;
    }
});

$('#blogname').on('input', function() {
    $('.site-title-error').remove();
    $(this).removeClass('form-invalid');
});

Why This Is Important

• No existing warning or guidance is provided for an empty Site Title.
• The Tagline field includes a descriptive example, but Site Title—being more critical—is left unchecked.
• The Site Title is a key component in how search engines and screen readers understand and display your site.
• Misconfigured or empty titles degrade theme outputs and can confuse users.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props sahilgidwani.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.