Validator: Forms custom validation reporting

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

[Mars0817]

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

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