-
Notifications
You must be signed in to change notification settings - Fork 4.1k
The attribute 'submit-success' may not appear in tag 'div' #16500
Copy link
Copy link
Closed
Description
I've read other closed issues, but this is a really bad restriction. Can someone explain the reason behind this 'div' form issue? Why must the attribute 'submit-success' not appear in tag 'div'? This makes it very difficult to make a responsive form, especially when our entire site is valid AMP.
<div class="pure-g ribbon l-box">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-2 l-box align-center is-center">
<form method="post"
class="p2"
action-xhr="contact-action.php"
target="_top"
custom-validation-reporting="show-all-on-submit">
<div class="inline">Name:</div>
<input type="text"
class="inline border-none"
id="show-all-on-submit-name"
name="name"
placeholder="..."
pattern="^\S+\s\S+$"
required>
<div visible-when-invalid="valueMissing"
validation-for="show-all-on-submit-name">
</div>
<div visible-when-invalid="patternMismatch"
validation-for="show-all-on-submit-name">Please enter your first and last name separated by a space (e.g. Jane Miller)
</div>
<br>
<div class="inline">E-Mail:</div>
<input type="email"
class="inline border-none"
id="show-all-on-submit-email"
name="email"
placeholder="x@y.com"
required>
<div visible-when-invalid="valueMissing"
validation-for="show-all-on-submit-email"></div>
<div visible-when-invalid="typeMismatch"
validation-for="show-all-on-submit-email"></div>
<br>
<div class="inline">Telephone:</div>
<input type="tel"
class="inline border-none"
id="show-all-on-submit-tel"
name="telephone"
placeholder="..."
required>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-2 l-box align-center is-center">
<div class="inline">Company:</div>
<input type="text"
class="inline border-none"
id="show-all-on-submit-company"
name="company"
placeholder="...">
<br>
<div class="inline">VAT:</div>
<input type="text"
class="inline border-none"
id="show-all-on-submit-vat"
name="vat"
placeholder="..."
required
pattern="[0-9]{8}">
<div visible-when-invalid="valueMissing"
validation-for="show-all-on-submit-vat"></div>
<div visible-when-invalid="patternMismatch"
validation-for="show-all-on-submit-vat">Please enter a valid VAT number with 8 digits.
</div>
<br>
<div class="inline">Address:</div>
<input type="text"
class="inline border-none"
id="show-all-on-submit-vat"
name="address"
placeholder="..."
required>
<div visible-when-invalid="valueMissing"
validation-for="show-all-on-submit-vat"></div>
<div visible-when-invalid="patternMismatch"
validation-for="show-all-on-submit-vat">Please enter a valid VAT number with 8 digits.
</div>
<br>
<div class="inline">Details:</div>
<input type="text"
class="inline border-none"
id="show-all-on-submit-notes"
name="comments"
placeholder="...">
<input type="submit"
value="Subscribe"
class="ampstart-btn caps">
<div submit-success>
<template type="amp-mustache">Success! Thanks {{name}} for contacting us. We will get back to you soon!
</template>
</div>
<div submit-error>
<template type="amp-mustache">Error! Please try again.
</template>
</div>
</div>
</form>
</div>
</div>
Please suggest a way to break a form into several parts so there won't be a single column form on a large screen.
Reactions are currently unavailable