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

Question

我正在用amp-form做后端数据输入验证，我想在前端显示错误。然而，当我提交表单时，即使表单包含错误(没有输入姓名)，前端也会说“成功！”而不是输出错误。

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头，每当我提交表单时，如果提交成功(即使我因为错误而无法发送电子邮件)，contact_process.php会返回一个HTTP头2xx，然后AMP会认为它是成功的。

submit-success将在成功提交表单时输出，无论表单是否执行了您希望它做的事情。

只要后端返回4xxx的HTTP头，submit-error就会输出。在我的例子中，我必须添加下面这行代码：

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

在echo json_encode($error_array)下面，它起作用了！

每当您想输出错误时，请确保手动发送错误HTTP头4xx。