Question

So I’m working on my login page modification again… and I’m running into another issue. Here’s the scenario… I’ve got a plugin that consists of two components: a script that rewrites the username field on the login/registration form, and a function that overrides the validation handler on registration.

Here are the files in question…

validator.php

<?php
// Rewrite registration form
function mpm_registration_form() {
    wp_enqueue_script('login_form', plugin_dir_url(__FILE__).'js/usernamerewrite.js', array('jquery'), false, false);
}
add_action('login_head', 'mpm_registration_form');

// Register actions
add_action('register_post', 'mpm_validator_verify_account', 10, 3);

// Check username against minecraft.net database
function mpm_validator_verify_account($login, $email, $errors) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_URL, 'http://www.minecraft.net/haspaid.jsp?user='.rawurlencode($login));
    $mcacct = curl_exec($curl);
    curl_close($curl);

    if($mcacct != 'true') {
        if($mcacct == 'false') {
            $errors->add('mc_error', __('<strong>Error:</strong> Minecraft account is invalid.'));
            return $errors;
        } else {
            $errors->add('mc_error', __('<strong>Error:</strong> Unable to contact minecraft.net.'));
            return $errors;
        }
        add_filter('registration_errors', 'mpm_validator_verify_account', 10, 3);
    }
}

js/usernamerewrite.js

jQuery(document).ready(function ($) {
    'use strict';
    /*global document: false */
    /*global $, jQuery */
    var username, reset;
    if ($('body').hasClass('login')) {
        username = document.createElement("input");
        username.type = 'text';
        username.name = 'log';
        username.id = 'user_login';
        username.className = 'input';
        username.size = '20';
        username.tabIndex = '10';
        reset = document.createElement("input");
        reset.type = 'text';
        reset.name = 'user_login';
        reset.id = 'user_login';
        reset.className = 'input';
        reset.size = '20';
        reset.tabIndex = '10';
        $('label').each(
            function () {
                if ($(this).text().trim() === 'Username') {
                    $(this).html('Minecraft Username<br/>');
                    $(this).append(username);
                } else if ($(this).text().trim() === 'Username or E-mail:') {
                    $(this).html('Minecraft Username or E-mail:<br/>');
                    $(this).append(reset);
                }
            }
        );
    }
});

The problem is that if I write the wp_enqueue_script line as it currently is (with the script being loaded in the header), the action function is handled properly but the rewrite never happens. Conversely, if I change it such that the script is loaded in the footer, the rewrite occurs, but the action is no longer handled properly (the username field is reset prior to being submitted). I’m at a complete loss.

Second (minor) annoyance: There is always a slight delay between the page loading and the occurrence of the rewrite. Any thoughts on how to make this more transparent would be greatly appreciated.

EDIT: If you’re going to vote the question down, the least you could do is indicate why…

Answer 1

Finally figured it out! The way I was doing it was horrible… I really need to brush up on my JS/jQuery. Here’s what I’ve ended up with which works beautifully in all my test cases, and also rewrites not just the field labels, but messages as well…

jQuery(document).ready(function ($) {
'use strict';
/*global document: false */
/*global $, jQuery */
    $('label').each(
        function () {
            $(this).html($(this).html().replace('Username', 'Minecraft Username'));
        }
    );
    $('.message').each(
        function () {
            $(this).html($(this).html().replace('username', 'Minecraft username'));
        }
    );
});