Skip to content Skip to sidebar Skip to footer
Home / Javascript / Polymer / Polymer 1.0 / Validation

How To Enforce Required Paper-radio-group In Polymer?

Post a Comment
What's the best way to enforce require check on paper-radio-group? I saw another question and answer that uses fallback-selection, here, but I want to force the user to choose 'yes

Solution 1:

I'm assuming you call checkAnswers() in your submit handler. Note that <iron-form>.validate() performs similar logic except it only calls validate() on children that have the IronFormElementBehavior and the required attribute. If you apply required to the appropriate input elements, you could replace checkAnswers() with this.$.form.validate().

submit: function() {
  //var isValid = checkAnswers();var isValid = this.$.form.validate();
}

<paper-radio-group> actually does not have the IronFormElementBehavior, so its required attribute has no effect. You could workaround this by wrapping <paper-radio-group> with your own custom element that properly adds the behavior:

<dom-module id="radio-group">
  <template><paper-radio-groupid="group"attr-for-selected="{{attrForSelected}}"selected="{{selected}}"><content></content></paper-radio-group></template><script>Polymer({
      is: 'radio-group',
      behaviors: [
        Polymer.IronFormElementBehavior
      ],
      getselectedItem() {
        returnthis.$.group.selectedItem;
      },
      validate: function() {
        returnthis.selectedItem != null;
      }
    });
  </script>
</dom-module>

Then, just replace <paper-radio-group> with <radio-group>:

<radio-groupattr-for-selected="value"required><paper-radio-buttonvalue="yes">Yes</paper-radio-button><paper-radio-buttonvalue="no">No</paper-radio-button></radio-group>

<head><basehref="https://polygit.org/polymer+1.11.0/components/"><scriptsrc="webcomponentsjs/webcomponents-lite.js"></script><linkhref="polymer/polymer.html"><linkhref="iron-form/iron-form.html"><linkhref="iron-label/iron-label.html"><linkhref="paper-radio-group/paper-radio-group.html"><linkhref="paper-radio-button/paper-radio-button.html"><linkhref="paper-button/paper-button.html"></head><body><x-form></x-form><dom-moduleid="x-form"><template><iron-formid="form"><formaction=""><iron-label>Do you agree?
          <radio-groupname="answers"id="answer"attr-for-selected="value"required><paper-radio-buttonname="answerY"value="yes">Yes</paper-radio-button><paper-radio-buttonname="answerN"value="no">No</paper-radio-button></radio-group></iron-label><div><paper-buttonon-click="submit">Submit</paper-button></div></form></iron-form></template><script>HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-form',
        submit: function() {
          console.log('valid', this.$.form.validate(),
                      'answer', this.$.answer.selectedItem && this.$.answer.selectedItem.value);
        }
      });
    });
  </script></dom-module><dom-moduleid="radio-group"><template><paper-radio-groupid="group"attr-for-selected="{{attrForSelected}}"selected="{{selected}}"><content></content></paper-radio-group></template><script>HTMLImports.whenReady(function() {
      Polymer({
        is: 'radio-group',
        behaviors: [
          Polymer.IronFormElementBehavior
        ],
        getselectedItem() {
          returnthis.$.group.selectedItem;
        },
        validate: function() {
          returnthis.selectedItem != null;
        }
      });
    });
  </script></dom-module></body>

codepen

For binary input like these Yes/No answers, it might be appropriate to use <paper-checkbox> instead, as it requires less code and simplifies the form for that input.

<head><basehref="https://polygit.org/polymer+1.11.0/components/"><scriptsrc="webcomponentsjs/webcomponents-lite.js"></script><linkhref="polymer/polymer.html"><linkhref="iron-form/iron-form.html"><linkhref="paper-checkbox/paper-checkbox.html"><linkhref="paper-button/paper-button.html"></head><body><x-form></x-form><dom-moduleid="x-form"><template><iron-formid="form"><formaction=""><paper-checkboxid="answer"required>I agree</paper-checkbox><div><paper-buttonon-click="submit">Submit</paper-button></div></form></iron-form></template><script>HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-form',
          submit: function() {
            console.log('valid', this.$.form.validate(),
                        'answer', this.$.answer.checked);
          }
        });
      });
    </script></dom-module></body>

codepen

Post a Comment for "How To Enforce Required Paper-radio-group In Polymer?"