Question

我有几个链接的下拉列表，如果链接的下拉列表为空，则希望阻止在更改事件上提交表单。

<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>

Answer 1

通过将输入状态转换为amp-state对象并在发生更改事件时检查它们来验证表单有点迂回。

在我看来，使用HTML5 Form validation API（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>

屏幕截图示例：

AMP：如何在条件变更事件上提交表单

1 个答案: