AMP: Как отправить форму на событие изменения с условием - PullRequest
Новая
       39

AMP: Как отправить форму на событие изменения с условием

0 голосов
/ 16 мая 2018

У меня есть пара связанных выпадающих меню, и я хочу запретить отправку формы при изменении события, если связанный выпадающий список пуст. 

<form id="foo">
    <select name="first" on="change:AMP.setState({settings: {first: event.value}}),foo.submit" >
        ...
    </select>

    <select name="second" on="change:AMP.setState({settings: {second: event.value}}),foo.submit" >
        <option value=0> Please select </option>
        ...
    </select>

</form>

Могу ли я проверить состояние и затем отправить форму, если значение подходит?Что-то вроде: 

<select name="first" on="change:AMP.setState({settings: {first: event.value}}),settings.second ? foo.submit : nothing to do" >

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

Попытка сделать это с проверкой, но она не работает с раскрывающимся списком, ввод работает нормально. 

            <input type="text"
                   id="show-first-on-submit-name"
                   name="name"
                   placeholder="Digit..."
                   required
                   on="change:AMP.setState({settings: {testing: event.value}}),requirements-form.submit"
                   pattern="^([1-9][0-9]*)$">
            <span visible-when-invalid="valueMissing"
                  validation-for="show-first-on-submit-name"></span>
            <span visible-when-invalid="patternMismatch"
                  validation-for="show-first-on-submit-name">
              Please enter not '0'
            </span>

            <select name="purpose"
                    id="purpose"
                    pattern="^([1-9][0-9]*)$"
                    required
                    on="change:AMP.setState({settings: {purpose: event.value}}),requirements-form.submit">
                <option value="0">Please select</option>
                <option value="1">One</option>
            </select>
            <span visible-when-invalid="valueMissing"
                  validation-for="purpose">missing</span>
            <span visible-when-invalid="patternMismatch"
                  validation-for="purpose">wrong</span>

1 Ответ

0 голосов
/ 26 мая 2018

Проверка формы путем преобразования входного состояния в объект amp-state и проверка их при возникновении события изменения немного сложны.

По моему мнению, было бы проще использовать API проверки формы HTML5 (AMP также использует его) для обработки работ по проверке ввода. Все, что вам нужно сделать, это добавить атрибут required к элементу <select> и удалить логику проверки onChange.

Вот простой пример: 

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>My AMP Page</title>
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <style amp-custom>
    h1 {
      margin: 1rem;
    }
  </style>
</head>
<body>
  <form target="_blank" action="/">
    <select name="tier1" required>
      <option value="">Please select</option>
      <option value="opt1">tier1 - opt1</option>
      <option value="opt2">tier1 - opt2</option>
    </select>
    <select name="tier2" required>
      <option value="">Please select</option>
      <option value="opt1">tier2 - opt1</option>
      <option value="opt2">tier2 - opt2</option>
    </select>
    <input type="submit" value="submit" />
  </form>
</body>
    </html>

Пример снимка экрана:

enter image description here

...