Dart Polymer form field not showing validate errors

Question

I have code similar to this example working nicely with a sing-page app using AngularJS. I wanted to upgrade the page by using Dart and Dart-Polymer.

In the HTML5 AngularJS version the HTML types are validated by default. So type="email", type="url", type="date", etc. work and give validation errors when filling the form.

I've based the following example on the classes and mark-up from the form Dart Polymer tutorial:

• Get Input from a Form tutorial

Take a look at the field, theData['authorUrl'] below.

<polymer-element name="reference-form" extends="form" >
  <template>
    <style> ... </style>
    <div id="slambookform"  >
         :
      <div class="entry">
        <label>URL:</label>
        <input type="url" value="{{theData['authorUrl']}}">
      </div>
         :
    </div>
  <template>
</polymer-element>

Doesn't highlight the URL field for an invalid syntax. Whereas a congruent version of the same field using AngularJS with HTML mark-up shows an invalid URL entry with a red box around the form input field.

1. If NOT highlighting or validating fields is default Dart Polymer behaviour:
   • How may I turn-on' this functionality?
2. Do I need the tags with Polymer? Is this the intended behaviour?
3. Failing that, is there a workaround or emulation pattern that is commonly used to match HTML5 validation?

The same snippet in the AngularJS version is:

<form>
      :
    <label>URL:</label>
    <input type="url" data-ng-model="authorUrl"/>
      :
</form>

An invalid input will highlight the URL input with a red box.

I should explain the intention of this question is to check compatibility and difference between Dart Polymer, AngularJS and HTML5 on form input. And of course to understand what the options are to keep things on-track.

Thanks in advance.

see also:

• How do I use HTML5 validations on dart polymer elements?

Answer 1

I made a little test and experienced this: Validation only happens when submitting the form. Thus <form> tag is required around the input.

Validation happens then in both the regular case and the custom element. Maybe angular adds some special validation functionality?

Adding this works even without submitting the form in both cases:

<style>
  input:invalid {
    border: 1px solid #900;
  }
</style>

Regards Robert