1

我正在尝试在amp-form组件上实现自定义字段验证，但我所有的努力都是徒劳的。

虽然XHR request returns a valid JSON, 它不会使该字段无效并且没有显示错误消息。

我尝试了官方文档中的代码：https ://amp.dev/documentation/components/amp-form/?referrer=ampproject.org#verification没有运气。

转向 Git 代码示例：https ://github.com/ampproject/amphtml/blob/main/examples/forms.amp.html仍然没有。

有人可以告诉我我做错了什么吗？

这是完整的代码：AMP Playground

这是我的脚本附件：

<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>

这是我的表格：

<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>

返回的 JSON 是：

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

完整代码可在AMP Playground中找到

4

1 回答 1

1

解决方案很简单！响应标头的状态为 200。

显然，该脚本会在检查 JSON 本身之前检查请求的状态。

这是 PHP 中的验证端点以供将来参考：

<?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);

?>
于 2021-04-13T12:02:12.103 回答