Support » Developing with WordPress » Rendering a php/html page with data

  • Hi there, this is the first time I’m building a plugin. In this plugin I made a function that renders a form by doing require 'views/form.php' which gets placed on a Register page within the_content. Although when a user submits the form, I want the form to be able to render again, but with errors shown at the right places, in case a user missed an input field or so. So I’m basically trying to render a form, and want to be able to render it again after submit with errors, in case a validation fails

Viewing 8 replies - 1 through 8 (of 8 total)
  • mattlitzinger

    (@mattlitzinger)

    Hi @janmoes

    I would use the $_SERVER['PHP_SELF'] variable as the form action attribute, so the form posts to itself. This is described in greater detail in this tutorial. This would allow you to test the input values after the form is submitted and render any error messages or a success state.

    <form 
        method="post" 
        action="<?php echo $_SERVER["PHP_SELF"];?>"
    >
        ...
    </form>

    Hope that helps.

    Moderator bcworkz

    (@bcworkz)

    In the context of a WP page, PHP_SELF will take you to the file OK, but the WP environment might not be initialized, or you may not be taken to the right WP page, causing strange errors. You can simply assign an empty string to the action attribute and the form will submit back to the same WP page the user is already on, re-executing whatever code was originally executed.

    Your code can differentiate between an initial GET request and a POST request (via $_SERVER['REQUEST_METHOD']) and behave accordingly.

    Alan Fuller

    (@alanfuller)

    Whilst you can go the route of rending the form again, however as Javascript is now pretty universal most forms solution use a Javascript implementation and dynamically update the html.

    You can do basic validation in Javascript alone, and on submit send a call to the server either via AJAX or a fetch to an endpoint which return the server side validation.

    Traditionally WP has built in support for ajax so there are plenty of tutorials, just google for how to build wp ajax forms.

    Slightly less well served with tutorial is using the WP REST API for validation, only because the REST API hasn’t been around as long.

    Depending on what you are trying to do would decide what route, in my opinion – need a quick solution that is straightforward – go AJAX. Want to become an awesome WP developer – go REST API route.

    Thread Starter janmoes

    (@janmoes)

    I’ve tried using AJAX with Jquery.
    In the success I want to return a message like “form successfully submitted”, and of course the data handling. Whenever some fields are left empty, an error array should be sent back to the html.

    But sadly I didn’t find a good example with my needs.
    Especially not on how to work with headers in PHP, to make sure Jquery receives the right data.

    Alan Fuller

    (@alanfuller)

    Whenever some fields are left empty,

    I’d validate empty fields that in hmtl 5 i.e. <input type="text" required ...
    and if you want more fancy stuff, validate in Javascript, no need to bother the server to check if a required field is empty.

    But sadly I didn’t find a good example with my needs

    I’m surprised

    Especially not on how to work with headers in PHP, to make sure Jquery receives the right data.

    you just send the response in JSON and die.

    WordPress even has a function for that wp_send_json https://developer.wordpress.org/reference/functions/wp_send_json/

    Thread Starter janmoes

    (@janmoes)

    Didn’t know about that wp_send_json method :), I started working on developing plugins a week ago. But I already made the serverside validation. I’d like to learn how to imply that with my jquery/ajax code for future purposes etc.

    With not finding a good example with my needs, I meant that a lot of small tutorials all look so different.

    I was trying to find a tutorial where they could send like an entire $errors array to the catch/error method of an ajax request.

    Alan Fuller

    (@alanfuller)

    I would recommend you actually want the errors to be handled in success. Because it is a ‘success’ that the server performed the validation and is telling the javascript the result, successfully.

    The error catch would be that the server call failed ( e.g. a 404 or 500 ) and returned an error code.

    Certainly the easier way to code, no messing around with setting headers and the way it is done in many cases.

    Thread Starter janmoes

    (@janmoes)

    Yeah I actually thought about. In the backend you either return the success message like “Your form has been submitted” or the list of errors. This can be done with some simple PHP logic, to let the system know what you want to return. And ofcourse what you said. Using the error/catch for server errors like a 4xx.

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.