Как показать сообщение о недопустимой форме проверки в AMP?

У меня есть простая форма на веб-сайте 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>

Я хотел бы знать, можно ли показать общее сообщение об ошибке рядом с вводом отправки, в котором говорится, что форма все еще недействительна.


forms amp-html
person gog    schedule 12.07.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать хуки CSS, предоставляемые amp-form < / a>, а именно 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
}
person fstanis    schedule 13.07.2018
comment
Это решение работает, но у него есть проблема, сообщение отображается, даже если пользователь не взаимодействовал с формой. - person gog; 17.07.2018
comment
Вы можете сделать сообщение hidden по умолчанию, а затем использовать amp-bind, чтобы показать его при изменении любого поля. - person fstanis; 18.07.2018
comment
как я могу сделать это со скрытым? который является недействительным атрибутом. - person gog; 24.07.2018
comment
Допустимо использование [hidden] с логическим выражением (ampproject.org/docs/reference / components / amp-bind # bindings). Что-то вроде [hidden]="myState.isModified" с on="change:AMP.setState({myState: { isModified: true } })" на ваших входах должно работать. - person fstanis; 24.07.2018