AMP: Как отправить форму на событие изменения с условием
У меня есть пара связанных выпадающих меню и я хочу запретить отправку формы при изменении события, если связанный выпадающий список пуст.
<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 ответ
Проверка формы путем преобразования входного статуса в 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>
Пример скриншота:
