如何在AMP中显示验证无效表单消息？

Question

我在AMP网站上有一个简单的表单，我在其中使用as-you-go策略进行字段验证。

我想在提交按钮旁边显示一条通用消息，说明该表单仍然无效。

  <form method="POST" class="p2" action-xhr=".../api/contacts" custom- 
      validation-reporting="as-you-go" target="_top">
     <input type="text" placeholder="Email" id="email_input" name="email" 
       required>
     <span visible-when-invalid="valueMissing" validation-for="email_input"></span>
     <input name="phone" id="phone_input" required>
     <span visible-when-invalid="valueMissing"></span>

     //SHOW Invalid form message here!
     <input id="btn-form-submit" type="submit" value="Submit">
      <div id="submit-success" submit-success>
        <template type="amp-mustache">
           <h6>Success!</h6>
        </template>
      </div>
      <div submit-error>
          <template type="amp-mustache">
               <h6> Error</h6>
          </template>
      </div>
    </form>

我想知道是否可以在提交输入旁边显示一条通用错误消息，说明该表单仍然无效。

Answer 1

你可以使用CSS hooks provided by amp-form，特别是user-valid和user-invalid。

      //SHOW Invalid form message here!
      <p class="message-when-invalid">One or more fields are invalid.</p>
      <input id="btn-form-submit" type="submit" value="Submit">

并且在CSS中确保在表单有效时隐藏消息：

form.user-valid .message-when-invalid {
    display: none
}