如何验证AMP表单中的复选框

时间：2017-07-19 19:43:20

标签： forms validation checkbox amp-html

我在AMP中有一个包含一组复选框的表单，例如：

<form method="post" target="_blank" name="form" custom-validation-reporting="show-all-on-submit" action-xhr="/some-xhr-action">
    <span visible-when-invalid="valueMissing" validation-for="favoriteSports">You must select at least ONE sport.</span>
    <label for="favoriteSports">Choose one or more of your favorite sports:</label>
    <input type="checkbox" required id="favoriteSports" name="favoriteSports" value="football">Football</input>
    <input type="checkbox" required id="favoriteSports" name="favoriteSports" value="baseball">Baseball</input>
    <input type="checkbox" required id="favoriteSports" name="favoriteSports" value="basketball">Basketball</input>
    <input type="checkbox" required id="favoriteSports" name="favoriteSports" value="soccer">Soccer</input>
    <input type="submit" value="Submit"></input>
</form>

如何验证是否使用AMP检查了至少一个favoriteSports复选框？

3 个答案:

答案 0 :(得分：3)

我同意使用amp-bind将有助于解决您的问题。

例如：

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <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>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>  
  <link rel="canonical" href="www.example.com">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-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>

</head>
<body>
        <amp-state id="pageStatus">
         <script type="application/json">
            {
              "choiceChecked": 0
              }
         </script>
      </amp-state>
<form method="post" target="_blank" name="form" custom-validation-reporting="show-all-on-submit" action-xhr="/some-xhr-action">
    <span visible-when-invalid="valueMissing" validation-for="favoriteSports">You must select at least ONE sport.</span>
    <label for="favoriteSports">Choose one or more of your favorite sports:</label>
    <input type="checkbox" on="change:AMP.setState({pageStatus: {choiceChecked: event.checked == true ? pageStatus.choiceChecked + 1 : pageStatus.choiceChecked - 1}})" required id="favoriteSports" name="favoriteSports" value="football">Football</input>
    <input type="checkbox" on="change:AMP.setState({pageStatus: {choiceChecked: event.checked == true ? pageStatus.choiceChecked + 1 : pageStatus.choiceChecked - 1}})" required id="favoriteSports" name="favoriteSports" value="baseball">Baseball</input>
    <input type="checkbox" on="change:AMP.setState({pageStatus: {choiceChecked: event.checked == true ? pageStatus.choiceChecked + 1 : pageStatus.choiceChecked - 1}})" required id="favoriteSports" name="favoriteSports" value="basketball">Basketball</input>
    <input type="checkbox" on="change:AMP.setState({pageStatus: {choiceChecked: event.checked == true ? pageStatus.choiceChecked + 1 : pageStatus.choiceChecked - 1}})" required id="favoriteSports" name="favoriteSports" value="soccer">Soccer</input>
    <input type="submit" value="Submit"></input>
      <p>Checked:
        <span [text]="pageStatus.choiceChecked">0</span>
    </p>
</form>
</body>
</html>

在该代码中，您有一个表示已完成选择的变量，然后您可以将其与amp-bind一起使用，并在值为0时使提交按钮不可用（通过css）。

答案 1 :(得分：1)

检查AMP-HTML的AMP-bind功能。我想你可以用它来验证AMP中的条件：

  

使用数据绑定和表达式添加自定义交互。

必需的脚本：

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

答案 2 :(得分：0)

这只是kul3r4答案的升级。您可以使用其他复选框并有条件地更改其已检查状态。这样，验证将起作用并阻止提交表单。 

<!doctype html>
<html ⚡>
    <head>
    <meta charset="utf-8">
    <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>
   <script async custom-element="amp-bind" 
src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>  
   <link rel="canonical" href="www.example.com">
   <meta name="viewport" content="width=device-width,minimum-
scale=1,initial-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>

</head>
<body>
    <amp-state id="pageStatus">
     <script type="application/json">
        {
          "choiceChecked": 0
          }
     </script>
  </amp-state>

<form method="post" target="_blank" name="form" custom-validation-
reporting="show-all-on-submit" action-xhr="/some-xhr-action">
    <span visible-when-invalid="valueMissing" validation 
for="anythingChecked">You must select at least ONE sport.</span>
    <label for="favoriteSports">Choose one or more of your favorite sports:
</label>

    <input type="checkbox" on="change:AMP.setState({pageStatus: {choiceChecked: 
event.checked == true ? pageStatus.choiceChecked + 1 : 
pageStatus.choiceChecked - 1}})" required id="favoriteSports1" 
name="favoriteSports" value="football">Football</input>

    <input type="checkbox" on="change:AMP.setState({pageStatus: {choiceChecked: 
event.checked == true ? pageStatus.choiceChecked + 1 : 
pageStatus.choiceChecked - 1}})" required id="favoriteSports2" 
name="favoriteSports" value="baseball">Baseball</input>

    <input type="checkbox" on="change:AMP.setState({pageStatus: {choiceChecked: 
event.checked == true ? pageStatus.choiceChecked + 1 : 
pageStatus.choiceChecked - 1}})" required id="favoriteSports3" 
name="favoriteSports" value="basketball">Basketball</input>

    <input type="checkbox" on="change:AMP.setState({pageStatus: {choiceChecked: 
event.checked == true ? pageStatus.choiceChecked + 1 : 
pageStatus.choiceChecked - 1}})" required id="favoriteSports4" 
name="favoriteSports" value="soccer">Soccer</input>

<input type="submit" value="Submit"></input>

<input type="checkbox" id="anythingChecked" 
[checked]="pageStatus.choiceChecked > 0 ? 'checked' : ''"/>

</form>
</body>
</html>
相关问题
最新问题