Pipit v0.5

Pipit v0.5 adds new functions that help you with handling forms.

Submitting forms with Javascript

One of the major things missing from Perch is a defined way for submitting forms with Javascript. While you can certainly submit a form with Javascript, you don’t get any feedback so you can’t easily tell if any fields returned an error or what the error was.

The other issue is the lack of a defined way to submit a non-Perch-templated form to be processed by a Perch app’s form handler. This becomes a problem when you are using modern Javascript frameworks and/or using the JAM stack.

The new pipit_form_response() function is here to help with this. It works for both standard Perch and Perch Runway, and it returns a JSON response like the following:

{
    "status": 422,
    "errors": { 
        "name": "required",
        "email": "format"
    }
}

It works for both Perch-templated forms and non-Perch-templated forms. You can also post JSON and the function will convert the data for Perch. And you can still use a Perch-templated form for validation even if you post from a non-Perch-templated form.

Read the documentation to find out how to use it.

Checking for errors

While Perch comes with perch:error conditional tags, each tag pair can only be used to check for a single error type:

<perch:label for="email">Email</perch:label>
<perch:input id="email" type="email" required helper="PerchMembers_Members::check_email" />

<perch:error for="email" type="required">
    <p>Please add your email address</p>
</perch:error>

<perch:error for="email" type="helper">
    <p>That email address is already in use</p>
</perch:error>

This makes it harder to check if a given field has at least one error, which is something you may want to do to conditionally add a class to highlight the field(s) that returned an error.

<div class="field has-error">
    <perch:label for="email">Email</perch:label>
    <perch:input id="email" type="email" required helper="PerchMembers_Members::check_email" />
</div>

pipit_form_set_error_vars() adds a variable to the template engine for each form field that has at least a single error. The variables take the following format:

{formID}_error_{fieldID}

So when you use the function you can use a single perch:if tag to check whether a field returned an error:

<perch:form id="register" method="post" app="perch_members">
    <perch:label for="email">Email</perch:label>
    <perch:input id="email" type="email" required helper="PerchMembers_Members::check_email" />

    <perch:if exists="register_error_email">
        <!--* the input field with the ID email returned an error *-->
    </perch:if>
</perch:form>

So it is more straightforward to add to conditionally add a class to highlight the field(s) that returned an error.

<div class="field <perch:if exists="register_error_email">has-error</perch:if">
    <perch:label for="email">Email</perch:label>
    <perch:input id="email" type="email" required helper="PerchMembers_Members::check_email" />
</div>
link