1

I was reading Seth Ladd's blog at http://blog.sethladd.com/2013/09/forms-http-servers-and-polymer-with-dart.html

Lets say I add another Form component (Form2) repeating Steps 3 and 4, and then import Form2 in Step 5. So Step 5 should look like the code below:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="parse_form_submit.css">
    <link rel="import" href="person_form.html">
    <script src="packages/polymer/boot.js"></script>
 </head>
 <body>
   <h1>Forms</h1>

<!-- Due to a bug in polymer, we can't use custom attributes.
     See https://code.google.com/p/dart/issues/detail?id=12262
     <person-form action="http://localhost:8888/submit"></person-form>
-->

<!-- in the meantime -->
    <person-form></person-form>
    <form-2><form-2>

  </body>
</html>

Where should I now put the 'Submit' button - in one of the forms or in the parent into which the forms are imported? In either case, how do I get auto-validation etc by htnl5 when the submit button is clicked? Everything works fine for a single form that contains its own submit button within the tag, but not so when the submit button is placed external to the tag.

Thanks

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
st_clair_clarke
  • 5,453
  • 13
  • 49
  • 75

1 Answers1

1

Assuming both person-form and form-2 are encapsulated forms, each will have their own submit button.

I don't think a <form> tag will see into the Shadow DOM to find fields inside of a custom element. So best to think of it like:

my-special-form extends form

That is, create a custom element that is itself a fully encapsulated form.

Seth Ladd
  • 112,095
  • 66
  • 196
  • 279