Question

如果AMP中的表单为空，是否有任何方式显示错误消息（即，没有任何字段具有任何值？）。我尝试了以下操作，但它似乎不起作用（请不要使用div.error节点）。

<form method="POST" id="my-form" class="p2" action-xhr="/components/amp-form/submit-form" target="_top" custom-validation-reporting="show-first-on-submit">
  <p>My Form</p>
  <div class="error" visible-when-invalid="valueMissing" validation-for="my-form">
    Form is empty could not submit.
  </div>
  <div>
    <input required id="username" type="text" placeholder="username" name="username">
    <input required id="password" type="password" placeholder="password" name="password">
  </div>
  <input type="submit" value="OK">
</form>

Answer 1

尝试使用无效的验证状态，例如on="invalid:error.show"

invalid：表单的验证状态为“无效”（根据其reporting strategy）。

<form method="POST" id="my-form" class="p2" action-xhr="/components/amp-form/submit-form" target="_top" on="invalid:error.show" custom-validation-reporting="show-first-on-submit">
  <p>My Form</p>
  <div class="error" id="error" hidden>
    Form is empty could not submit.
  </div>
  <div>
    <input required id="username" type="text" placeholder="username" name="username">
    <input required id="password" type="password" placeholder="password" name="password">
  </div>
  <input type="submit" value="OK">
</form>

如果Google amp中的表单为空，则显示错误消息

1 个答案: