无法在 AMP 中提交表单时显示验证错误

Question

我正在用amp-form做后端数据输入验证，我想在前端显示错误。但是，当我提交表单时，即使表单包含错误（未输入名称），前端也会显示 "Success!" 而不是输出错误。

PHP代码： https://gist.github.com/Stefany93/364db9e088b570fff83387494e8459a4#file-php

   action-xhr="scripts/contact_process.php" 
   verify-xhr="/scripts/contact_process.php"
   method="post" 
   target="_blank" 
   class="detailed_contact_form "
   custom-validation-reporting="as-you-go"
   >
      <fieldset class="user-valid valid">
         <legend>
            <span> Schedule an appointment</span>
         </legend>
         <div class="form-body">
            <div class="form-group">   
             <div class="form-group"> 
                  <div class="form-group"> 
               <label for="email">Email  </label> 
               <input type="text" required name="email" id="email"  value="exampleexample.com"class="form-input string-entry">
            </div>
               <label for="name">Name  </label> 
               <input type="text" required  name="name" id="name" value="Cindy"  class="form-input string-entry">
            </div>
            <div class="form-group">  
               <label for="phone">Phone </label>  
               <input type="tel" required name="phone" id="phone" value="123-345-6789" class="form-input string-entry">
            </div>
               <div class="form-group">  
               <label for="phone">Message </label>  
               <textarea name="message" required class="textarea" >I want to schedule an appointment for my dragon Skippy, for tomorrow 10AM</textarea>
            </div>
            <div class="form-group button-holder">
               <input type="submit" class="button" value="Send appointment!">
            </div>
         </div>
            <div verify-error>
        <template type="amp-mustache">
            {{#verifyErrors}}
                <p>{{message}}</p>
            {{/verifyErrors}}
            {{^verifyErrors}}
                <p>Something went wrong. Try again later?</p>
            {{/verifyErrors}}
        </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>

    <div submit-success>
    <template type="amp-mustache">
      Success! 
    </template>
  </div>

      </fieldset>

   </form> ```

Answer 1

我收到一条成功消息，因为 AMP 跟踪 HTTP headers，每当我提交表单时，如果提交成功（即使由于错误我无法发送电子邮件）contact_process.php 会 return 一个 HTTP header 2xx 然后 AMP 会认为它是成功的。

submit-success 将在成功提交表单时输出，无论表单是否按照您的要求执行。

submit-error 将在 back-end return 为 4xxx 的 HTTP header 时输出。就我而言，我必须添加这行代码：

header("HTTP/1.1 400 Bad Request");

低于 echo json_encode($error_array) 成功了！

每当你想输出错误时，确保手动发送错误 HTTP header 4xx.

无法在 AMP 中提交表单时显示验证错误

Can't display verification errors on form submit in AMP

amp-html