Amphtml: Validator: Forms custom validation reporting

[mkhatib]

We need to update validator for form to allow the following:

• [custom-validation-reporting=show-first-on-submit|show-all-on-submit|as-you-go] can optionally appear on <form> elements
• [visible-when-invalid=badInput|customError|patternMismatch|rangeOverflow|rangeUnderflow|stepMismatch|tooLong|typeMismatch|valueMissing] and [validation-for=id-regex] can optionally appear on any element in the document but must appear together on the element.

Here's an example.

<form method="post"
      action-xhr="/form/echo-json/post"
      target="_blank"
      custom-validation-reporting="show-first-on-submit">
    <fieldset>
        <label>
            <span>Your name</span>
            <input type="text" name="name" id="name4" required pattern="\w+\s\w+">
            <span visible-when-invalid="valueMissing" validation-for="name4"></span>
            <span visible-when-invalid="patternMismatch" validation-for="name4">
                Please enter your first and last name separated by a space (e.g. Jane Miller)
            </span>
        </label>
        <label>
            <span>Your email</span>
            <input type="email" name="email" id="email4" required>
            <span visible-when-invalid="valueMissing" validation-for="email4"></span>
            <span visible-when-invalid="typeMismatch" validation-for="email4"></span>
        </label>
        <input type="submit" value="Subscribe">
    </fieldset>
</form>

ITI: #3343

[mkhatib]

One more thing, we also need to whitelist submit-success and submit-error attributes on dependents of form.

This allows users to instruct form to render submit success/error messages.

<form...>
    <div submit-success>
        <template type="amp-mustache">
            Success! Thanks {{name}} for subscribing! Please make sure to check your email {{email}}
            to confirm!
        </template>
    </div>
    <div submit-error>
        <template type="amp-mustache">
            Oops! {{name}}, We apologies something went wrong. Please try again later.
        </template>
    </div>
</form>

If possible, also enforce that they need to have a single template element inside them.

[honeybadgerdontcare]

• [visible-when-invalid=badInput|customError|patternMismatch|rangeOverflow|rangeUnderflow|stepMismatch|tooLong|typeMismatch|valueMissing] and [validation-for=id-regex] can optionally appear on any element in the document but must appear together on the element.

Is the request for visible-when-invalid and validation-for to appear on any element in the document? IOWs, any element in any document regardless of <form> being present, or does <form> need to be present but these element don't need to be descendants, or do these elements have to be descendants of

?

• need to whitelist submit-success and submit-error attributes on dependents of form.

Similar to the last question. What are "dependents"? Elements that appear when <form> is in the document, or is it only for descendants of <form>?

[mkhatib]

All attributes are form-related so it makes sense to only appear if a form exists (and hence amp-form.js is loaded).

Is the request for visible-when-invalid and validation-for to appear on any element in the document? IOWs, any element in any document regardless of being present, or does need to be present but these element don't need to be descendants, or do these elements have to be descendants of

need to be present but these elements don't need to be descendants.

Similar to the last question. What are "dependents"? Elements that appear when is in the document, or is it only for descendants of ?

Sorry meant to say descendants - autocorrected. These can only appear as descendants of <form>

[Gregable]

Fixed. Live everywhere except the javascript validator, which should be live in a couple hours.

[mkhatib]

@Gregable does this include the custom validations bit as well?

[honeybadgerdontcare]

@mkhatib If you're referring to custom-validation-reporting then yes. See https://github.com/ampproject/amphtml/blob/master/validator/validator-main.protoascii#L2140

[mkhatib]

@honeybadgerdontcare awesome! Thanks so much 👍

[dongzhanjun0817]

amp-form visible-when-invalid has parameter tooLong,Why are there no parameters tooShort?