2

Using the Settings API of Wordpress i want to try cancel the submission of the options when the validation/sanitization fails.

Registering the settings:

register_setting( 'mysettingspage', 'custom_options', 'input_validation' );

My validation function:

function input_validation( $input ){

settings_errors('custom_options');

$options = get_option( 'custom_options' );

// Create our array for storing the validated options
$output = array();

// Loop through each of the incoming options
foreach( $input as $key => $value ) {

        // Check to see if the current option has a value. If so, process it.
        if( isset( $input[$key] ) ) {

            // Strip all HTML and PHP tags and properly handle quoted strings
            $output[$key] = strip_tags( stripslashes( $input[ $key ] ) );

        } // end if

        //check if its not empty
            if(empty($value)){

                add_settings_error(
                    'custom_options',
                    'Missing value error',
                    __('On or more fields can\'t be empty.', 'custom'),
                    'error'
                );

                return array();
            } 

        } // end if


    } // end foreach

    // Return the array processing any additional functions filtered by this action
    return $output;
}

The problem is, even if no options are saved, wordpress still gonna display a message "Settings Saved" and save the empty array of option in the database.

Is there a way to change this behavior?

  • Try remove the settings_errors('custom_options'); or comment it out //settings_errors('custom_options'); – Sally CJ Jul 28 '18 at 1:56
  • Thanks for the answer, that removes the errors and not the "Settings Saved". – Guillermo Teixeira Jul 30 '18 at 9:23
  • How did you call the input_validation() function? You should probably better add the code to your question. – Sally CJ Jul 30 '18 at 11:12
  • I edited my question to include the way the function is called. – Guillermo Teixeira Jul 30 '18 at 14:45
  • Thanks for the update. So I'm guessing that you're creating a test settings page? If so, can I see the whole code? Because I tested your input_validation() code and it actually worked. However, not sure if you intended it, but I think the return array(); should be return $options; to return the old value. – Sally CJ Jul 31 '18 at 13:09
0

How to stop the form data from being saved on error

Actually, the "Settings saved." message does not necessarily mean that the options/value in the database was actually updated — because if the old and new values were the same, means there were no changes, then the old value will not be re-saved or overwritten in the database. However, you'd still see the "Settings saved." message which indicates that the form (data) was successfully submitted and processed without errors.

Hence, when the form data contains empty or invalid values, you should return the old options and not an empty array. Please see below, which is your code, but it's slightly modified so that you could hopefully understand what I mean:

function input_validation( $input ){

//settings_errors('custom_options'); // <- this should NOT be here..

$options = get_option( 'custom_options' ); // <- here's the OLD VALUE

// Create our array for storing the validated options
$output = array();

// Loop through each of the incoming options
foreach( $input as $key => $value ) {

        ... your code here ...

        //check if its not empty
            if(empty($value)){

                add_settings_error(
                    'custom_options',
                    'Missing value error',
                    __('On or more fields can\'t be empty.', 'custom'),
                    'error'
                );

                //return array(); // <- here don't return empty array
                return $options; // <- instead, return the old value
            } // end if


    } // end foreach

    // Return the array processing any additional functions filtered by this action
    return $output; // <- even if all form data are VALID, this/$output
                    // could still be the same as $options (i.e. there
                    // were no changes made)
}

//settings_errors('custom_options'); // <- this should NOT be here.. — Why not?

That's because the settings_errors() function is automatically called on your custom options page (provided it was created using the WordPress Settings API), therefore there's no need to manually call the function — just add settings errors and they'll be displayed automatically.

This is called automatically after a settings page based on the Settings API is submitted. Errors should be added during the validation callback function for a setting defined in register_setting().

— See https://developer.wordpress.org/reference/functions/settings_errors/

How to stop the form from being submitted on error

  1. If you just want to make sure the form fields are all filled in, add (the HTML5 attribute of) required to the field's HTML. For examples:

    <input name="custom_options[option_1]" type="text" required>
    <select name="custom_options[option_2]" required></select>
    <textarea name="custom_options[option_3]" required></textarea>
    
  2. Use JavaScript validation. Here's a very simple example: (using jQuery)

    <form method="post" action="options.php" id="my-form">
      <input name="custom_options[option_1]" type="text" id="option-1">
      <select name="custom_options[option_2]" id="option-2">
        <option value="">Select</option>
        <option value="1">One</option>
      </select>
      <textarea name="custom_options[option_3]" id="option-3"></textarea>
      <input type="submit">
    </form>
    
    <script>
    $('#my-form').on('submit', function(){
      if ( // check if all fields are filled
        $('#option-1', this).val().length < 1 ||
        $('#option-2', this).val().length < 1 ||
        $('#option-3', this).val().length < 1
      ) {
        alert('Please fill in all fields.');
        return false; // cancels the submit
      }
    });
    </script>
    

Try a demo here.


So basically, in the input_validation() function, the form has already been submitted. To prevent that, you can use client-side validation like I mentioned above — the HTML5 and jQuery validation.

  • 1
    Thank you for the help! That was the answer that i was looking for! – Guillermo Teixeira Aug 1 '18 at 10:08
  • I'm glad it helped you. =) – Sally CJ Aug 1 '18 at 14:45

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.