amp-form verification doesn't work, even with official documentation code

Question

I'm trying to implement custom field verification on an amp-form component, but all my efforts are in vain.

Although the XHR request returns a valid JSON, it doesn't invalidate the field and there is no error message displayed.

I tried the code from the official documentation: https://amp.dev/documentation/components/amp-form/?referrer=ampproject.org#verification with no luck.

Turned to the Git code sample: https://github.com/ampproject/amphtml/blob/main/examples/forms.amp.html and still nothing.

Could someone please tell me what am I doing wrong?

Here is the full code: AMP Playground

Here are my script attachements:

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

And here is my form:

<form
method="post"
action-xhr="https://ampscript.xyz/wp-content/uploads/demo/verify"
verify-xhr="https://ampscript.xyz/wp-content/uploads/demo/verify"  
custom-validation-reporting="as-you-go"
target="_blank"
>
<fieldset>
    <label>
        <span>Email</span>
        <input type="text" name="email" id="email" required>
        <span visible-when-invalid="customError" validation-for="email">That email is already taken</span>
    </label>
    <br>
    <label>
        <span>Zip Code</span>
        <input type="tel" name="zip" id="zip" required pattern="[0-9]{5}(-[0-9]{4})?">
    </label>
    <br>
    <div class="spinner"></div>
    <input type="submit" value="Submit">
</fieldset>
<div submit-success>
    <template type="amp-mustache">
        <p>Congratulations! You are registered with {{email}}</p>
    </template>
</div>
<div submit-error>
    <template type="amp-mustache">
        {{#verifyErrors}}                
            <p>{{message}}</p>
        {{/verifyErrors}}
        {{^verifyErrors}}                
            <p>Something went wrong. Try again later?</p>
        {{/verifyErrors}}        
    </template>
</div>
</form>

The returned JSON is:

{
    "verifyErrors": [
        {
            "name": "email",
            "message": "That email is already taken."
        },
        {
            "name": "zip",
            "message": "The city and zip do not match."
        }
    ]
}

Full code can be found in AMP Playground

Ivan Razine Ivan Razine · Accepted Answer · 2021-04-13T12:02:12

The solution was simple! The response header had a status 200.

Apparently, the script checks the status of the request before it checks the JSON itself.

Here is the verification endpoint in PHP for future reference:

<?php

    header('HTTP/1.1 400 Bad Request');
    header('Content-Type: application/json');
    header('Access-Control-Allow-Methods: POST');
    header('Access-Control-Allow-Origin: '.$_SERVER["HTTP_ORIGIN"]. '');
    header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
    header('AMP-Access-Control-Allow-Source-Origin: '.$_GET["__amp_source_origin"].'');
    header('Access-Control-Allow-Credentials: true');

    $response = array(
        "verifyErrors" => array(
            array(
                "name" => "email",
                "message" => "That email is already taken."
            ),
            array(
                "name" => "zip",
                "message" => "The city and zip do not match."
            )
        )
    );

    echo json_encode($response);

?>

amp-form verification doesn't work, even with official documentation code

1 Answers