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

Question

Is there any way to show an error message if a form is empty in AMP(ie none of the fields have any value?). I tried the following, but it does not seem to work(Please not the div.error node).

<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

Try with validation state invalid like on="invalid:error.show"

invalid : The form's validation state to "invalid" (in accordance with its 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>