4

In the edit profile section whenever I'm updating a field and if for example I've missed one required field (NickName) and changed the email address to a new one, the WordPress validation will refreshes all field and the new email address that I've entered would be lost.

I'm not using any third party plugin to edit profile only the generic WP one. This is the user edit page https://github.com/WordPress/WordPress/blob/master/wp-admin/user-edit.php

enter image description here

enter image description here

  • I didn't quite understand what you want. You mean if you change some informations and when you click to save, if occur some error you don't want to lose all the informations previously added? – Cesar Henrique Damascena Jul 13 '17 at 15:24
  • yes so basically if I filled in the form (empty form for example) and I missed a field and click on submit everything gets removed (because it was empty in the first place) and I have to fill back the form again. – Charles Xavier Jul 13 '17 at 15:51
  • 3
    This could be seen as a bug or an improvement with WP itself so you might consider filing an issue on trac: make.wordpress.org/core/handbook/testing/reporting-bugs – kraftner Jul 13 '17 at 16:38
  • 2
    @kraftner I did file an issue with a link to this question. The answer was : This could be as simple as using the validateForm() JavaScript function available in WordPress. – Jack Johansson Jul 13 '17 at 17:51
  • 1
    Look forward to your core patch @JackJohansson – birgire Jul 13 '17 at 18:25
6
+50

Approach 1, disable save button

What you can do, is to prevent the user from saving the form if the required fields are not filled. This can be simply done via javascript.

function require_fields_script(){
    echo "
        <script type='text/javascript'>
            (function($){
                $('#submit').on('click',function(e){
                    if (!$('#email').val() || !$('#nickname').val()){
                        e.preventDefault();
                        if (!$('#email').val()) {
                            window.alert('Please enter your email before saving.');
                        } else {
                            window.alert('Please enter your nickname before saving.');
                        }
                    }
                });
            })(jQuery);
        </script>";
}
add_action( 'admin_footer', 'require_fields_script' );

This can also be done by saving the values in a transient/globals and retrieving them after a fail save, but that's not necessary.

The point is, if the field is not set, there is no reason to let the user save it at the first place.

Approach 2, revert to default values

There is also another trick. When you load the page, there will be some default/pre-saved value as email and nickname. If the user tried to save the form without entering these, you can set them back to the old values. To do so, this is your way:

function require_fields_script(){
    echo "
        <script type='text/javascript'>
            (function($){
                var currentMail = $('#email').val();
                var currentNickname = $('#nickname').val();
                $('#submit').on('click',function(e){
                    if (!$('#email').val()){
                        $('#email').val(currentMail);
                    }
                    if (!$('#nickname').val()){
                        $('#nickname').val(currentNickname);
                    }
                });
            })(jQuery);
        </script>";
}
add_action( 'admin_footer', 'require_fields_script' );

Approach 3, fake an admin alert using jQuery

We can create a fake admin error by using $.before if the fields are not set. This is how we do it:

function require_fields_script(){
    echo "
        <script type='text/javascript'>
            (function($){
                $('#submit').on('click',function(e){
                    if (!$('#email').val()){
                        e.preventDefault();
                        $( '#your-profile' ).before( '<div class=\'error\'><p><strong>ERROR</strong>: Please enter an email.</p><button type=\'button\' class=\'notice-dismiss\'><span class=\'screen-reader-text\'>Dismiss this notice.</span></button></div>' );
                        $('html,body').animate({scrollTop:0},700);
                    }
                    if (!$('#nickname').val()){
                        e.preventDefault();
                        $( '#your-profile' ).before( '<div class=\'error\'><p><strong>ERROR</strong>: Please enter a nickname.</p><button type=\'button\' class=\'notice-dismiss\'><span class=\'screen-reader-text\'>Dismiss this notice.</span></button></div>' );
                        $('html,body').animate({scrollTop:0},700);
                    }
                });
            })(jQuery);
        </script>";
}
add_action( 'admin_footer', 'require_fields_script' );

This will throw an error and scroll the page to top, so the user can be noticed of the error. We can remove the div afterward, but since it will be removed automatically on save, it's not really necessary to do. Anyway, to remove the errors, you can use $.remove():

if ($('.error').length) {
    $('.error').remove();
}

PATCH UPDATE

I've created a patch that fully resolves the issue by doing AJAX and jQuery checks. The patch can be found on trac here. At the moment it has a minor bug, which I'll cover it that soon.

  • 1
    @ParbhuBissessar I tested both of them before posting. It can be customized since it's flexible. Do you want to show exactly if the email is missing or the nickname? – Jack Johansson Jul 13 '17 at 17:06
  • 1
    Approach 1 makes the most sense, IMO. As you put it, The point is, if the field is not set, there is no reason to let the user save it at the first place. It's odd to me the save action is available when required form fields are missing. – hwl Jul 13 '17 at 17:09
  • 1
    @ParbhuBissessar I've updated the first code. It does what you are asking now. – Jack Johansson Jul 13 '17 at 17:10
  • 1
    Surrounding form field(s) in red border to highlight what's missing is another common addition. Regardless, some version of your solution may be a solid core improvement as Kraftner noted in his comment above. – hwl Jul 13 '17 at 17:20
  • 1
    @ParbhuBissessar Yes you can, you just have to repeat the pattern and add elseif() for the rest of your fields. Also check the 3rd solution I just added. It's almost as real as a real admin error. – Jack Johansson Jul 13 '17 at 17:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.