How to validate checkboxes in an AMP form

问题

I have a form in AMP that has a set of checkboxes, for example:

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

How can I validate that at least one of the favoriteSports checkboxes is checked using AMP?

回答1:

I agree using amp-bind will help to solve your problem.

For example:

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

In that code you have a variable representing how many selection have been done, you can then use it with amp-bind and make the submit button not available (via css) when the value is 0.

回答2:

Check the AMP-bind functionality of AMP-HTML. I think you can use this to validate conditions in AMP:

Adds custom interactivity with data binding and expressions.

Required Script:

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

回答3:

This is just upgrade of kul3r4 answer. You can use additional checkbox and conditionally change it's checked status. This way validation will just work and prevent submiting of the form.

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

来源：https://stackoverflow.com/questions/45199700/how-to-validate-checkboxes-in-an-amp-form

标签

forms

validation

checkbox

amp-html