Skip to content

The attribute 'submit-success' may not appear in tag 'div' #16500

@88kbbq

Description

@88kbbq

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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions