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 に答える