Amphtml: Form is valid if only the input fields are filled in?

Created on 15 May 2018 · 4Comments · Source: ampproject/amphtml

When select element is required as well as an input field, when the input field is filled in but the select element doesn't have anything selected (value is blank), "valid" fires as successful.

I'm really not in the mood to implement a convoluted/unnecessary as suggested by https://ampbyexample.com/advanced/combobox/ just to make sure my user selects the required dropdown before the form can submit.

Why are these excluded from the "valid" check? The more I work with AMP the more these simple limitations make me wonder if all of this is worth it or not.

Here is a sample of the HTML:

<!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>
    <title>Hello, AMPs</title>
    <style amp-custom>
      form.amp-form-submit-success [submit-success],
      form.amp-form-submit-error [submit-error]{
        margin-top: 16px;
      }
      form.amp-form-submit-success [submit-success] {
        color: green;
      }
      form.amp-form-submit-error [submit-error] {
        color: red;
      }
      form.amp-form-submit-success.hide-inputs > input {
        display: none;
      }
    </style>
  </head>
  <body>
    <h4>Verification example</h4>
    <form
      method="post"
      verify-xhr="/verify"
      custom-validation-reporting="as-you-go"
      target="_blank"
      on="valid:AMP.setState({disable: false});invalid:AMP.setState({disable: true})"
    >
      <fieldset>
        <label>
          <span>Input Type</span>
          <select name="type" type="text" required>
            <option value="">Please Select</option>
            <option value="nonDigits">Non digits</option>
            <option value="digits">Digits</option>
          </select>
        </label>
        <label>
          <span>Input Text</span>
          <input type="text" name="value" id="input-text">
          <span visible-when-invalid="customError" validation-for="input-text"></span>
        </label>
        <input type="submit" 
            disabled [disabled]="disable"
            value="next">   
      </fieldset>
    </form>
  </body>
</html>

DiscussioQuestion

Source

AcidRaZor

Most helpful comment

Yes that makes sense, thank you for explaining that and especially for posting your solution.

I checked the spec and unfortunately it requires the value attribute to be present on the <option> tag. The value="" allows that option to become the "placeholder label option", which is necessary for the missing value validation state.

If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.

Constraint validation: If the element has its required attribute specified, and either none of the option elements in the select element's list of options have their selectedness set to true, or the only option element in the select element's list of options with its selectedness set to true is the placeholder label option, then the element is suffering from being missing.

So to summarize, the value attribute must be present for an option to be the placeholder label option, and the placeholder label option must be selected for the select to suffer from being missing and to cause the invalid event to fire.

https://html.spec.whatwg.org/#the-select-element

Since this is a consequence of the HTML standard and not a bug in AMP code, we can leave this issue closed. Thanks again!

cvializ on 16 May 2018

👍2

All 4 comments

/to @cvializ

aghassemi on 15 May 2018

Hi @AcidRaZor! Thanks for reporting your issue. It looks like the amp-bind extension is missing, which is why the [disabled] binding didn't update on the button. I made a quick repro and I can see correct behavior.

I pasted the above markup into https://validator.ampproject.org/ and saw it was missing the amp-bind extension script, and the required amp (or ⚡️) attribute on the <html> tag, and a few other errors that make the document invalid AMP. If something isn't behaving as you expect, it can be a good idea to check that your markup is valid.

Repro Demo: https://repro-amphtml-15300.glitch.me/
Source: https://glitch.com/edit/#!/repro-amphtml-15300
Successful validation: https://validator.ampproject.org/#url=https%3A%2F%2Frepro-amphtml-15300.glitch.me%2F

<!DOCTYPE html>
<html amp>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="https://repro-amphtml-15300.glitch.me">
    <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>
    <title>Hello, AMPs</title>
    <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>
    <style amp-custom>
      form.amp-form-submit-success [submit-success],
      form.amp-form-submit-error [submit-error]{
        margin-top: 16px;
      }
      form.amp-form-submit-success [submit-success] {
        color: green;
      }
      form.amp-form-submit-error [submit-error] {
        color: red;
      }
      form.amp-form-submit-success.hide-inputs > input {
        display: none;
      }
    </style>
  </head>
  <body>
    <h4>Verification example</h4>
    <form
      method="post"
      action-xhr="https://repro-amphtml-15300.glitch.me/submit"
      custom-validation-reporting="as-you-go"
      target="_blank"
      on="valid:AMP.setState({disable: false});invalid:AMP.setState({disable: true});submit-success:success.show"
    >
      <fieldset>
        <label>
          <span>Input Type</span>
          <select name="type" required>
            <option value="">Please Select</option>
            <option value="nonDigits">Non digits</option>
            <option value="digits">Digits</option>
          </select>
        </label>
        <label>
          <span>Input Text</span>
          <input type="text" name="value" id="input-text">
          <span visible-when-invalid="customError" validation-for="input-text"></span>
        </label>
        <input type="submit" 
            disabled [disabled]="disable"
            value="next">   
      </fieldset>
    </form>
    <p id="success" hidden>Form submitted successfully</p>
  </body>
</html>

I'll close this issue for now, but if it's still misbehaving for you we can reopen.

cvializ on 15 May 2018

Thank you @cvializ

So much fail in the example I had running locally, what I posted and what I experienced. I actually did have amp-bind in my code. Apologies for potential confusion.

It turns out the issue is quite simple;

<option value="">Select something, this is required</option>

will work perfectly as it's supposed to and fail validation on the form valid check, however;

<option>Select something, this is required</option>

Will validate every single time on the form even though a value is required. This is because if no value is specified, you get a 'null' and this is not an empty space.

This will always pass validation, even though it's a required field.

Hope it makes sense?

AcidRaZor on 16 May 2018