Polymer v1.0 входное подтверждение при нажатии кнопки

Question

Noob у полимера здесь, поэтому, пожалуйста, несите меня.

Я пытаюсь узнать, как создать форму, которая требует от пользователя ввода текста в текстовое поле, прежде чем нажать «Отправить». Если пользователь хит «Отправить» без чего-либо в текстовом поле, текстовое поле будет выделено красным цветом, и отображает сообщение об ошибке и т.д.

Вот мой код (не проверка пока) до сих пор:

<dom-module id="accountability-ticket"> 
    <template> 
     <paper-dialog with-backdrop entry-animation="scale-up-animation" exit-animation="fade-out-animation" id="diagTicket"> 
      <h2>I Own It Ticket</h2> 
      <div> 
       <paper-input-container id="gcashDeco" required error="GCash Ref. Required"> 
        <input id="gcashText" is="iron-input"> 
       </paper-input-container> 
       <div class="ctrlButtons flex"> 
        <paper-button dialog-dismiss>Cancel</paper-button> 
        <paper-button on-click="confirmClick">Submit</paper-button> 
       </div> 
      </div> 
     </paper-dialog> 
    </template> 
</dom-module> 
<script> 
Polymer({ 
    is: "accountability-ticket", 
    confirmClick: function(event){ 
     console.log(event); 
     var gCashDeco = document.getElementById('gcashDeco'); 
     var gCashText = document.getElementById('gcashText'); 
    } 
}); 

</script> 

I «ве чтения документации Polymer, и до сих пор придумали две вещи:

1. <paper-input> не проверяет, по существу, в соответствии с v0.5 - Он должен быть обернут в <paper-input-decorator> первой.
2. Версия 1.0 еще менее ясна, с <paper-input-container> вместо <paper-input-decorator> и смешанными тегами на демонстрационных страницах.

Учитывая, что я хочу придерживаться последней версии (v1.0), что мне нужно добавить в мой код, чтобы проверить, пусто ли текстовое поле и отобразить сообщение об ошибке, если оно ?

Спасибо.

Answer 1

Да, документ Polymer несколько запутан, но в качестве общего эмпирического правила: всегда смотрите на поведение, которым обладает элемент.

Так, paper-input (в 1.0) поставляется с PaperInputBehavior, и это означает, что вы можете просто написать следующее:

<paper-input label="Input label" required error-message="Field required!"></paper-input> 

<paper-input label="Input label" minlength="4" maxlength="10" auto-validate></paper-input> 

<paper-input label="Input label" pattern="MY_REGEX" auto-validate></paper-input> 

<paper-input label="Input label" validator="myvalidator"></paper-input> 

auto-validate делает вход - конечно - проверить, как она набираясь в. myvalidator должен быть элементом, реализующим IronValidatorBehavior и вставленным где-то на страницу. Если вы не хотите, чтобы поля были автоматически подтверждены или хотите сделать это сами, вызовите validate() в этом поле или установите invalid -flag и появится сообщение об ошибке. Вы даже можете настроить сообщение программно.

Answer 2

В то время как validator представляется полезным, я нашел его достаточно простым, чтобы проверить входные данные напрямую. Это будет делать то, что вам нужно:

... 
<div> 
    <paper-input-container id="gcashDeco"> 
    <paper-input-error>Field is empty</paper-input-error> 
    <input id="gcashText" is="iron-input" value="{{gcashInput::input}}"> 
    </paper-input-container> 

    <div class="ctrlButtons flex"> 
     <paper-button dialog-dismiss>Cancel</paper-button> 
     <paper-button on-tap="confirmClick">Submit</paper-button> 
    </div> 
</div> 
... 

... 
Polymer({ 
is: "accountability-ticket", 

confirmClick: function() { 
    if (this.gcashInput == null) 
    { 
     //show error 
     this.$.gcashDeco.invalid = true; 
    } 
} 

paper-input-error Этот элемент ссылается на идентификатор независимо paper-input-container он находится внутри. Установка его invalid собственности на true показывает ошибку, и false скрывает ее.

<paper-input-error>Field is empty</paper-input-error> 

Следующий фрагмент связывает входное значение данного поля к переменной this.gcashInput, который вы можете получить доступ внутрь confirmClick или любым другим способом.

{{gcashInput::input}} 

В заключительной ноте, получая идентификаторы элементов внутри вашего элемента Polymer делается так:

this.$.gcashDeco 

не так, как вы бы с ванильным Javascript:

document.getElementById('gcashDeco'); 

последний, ванильный путь JS, будет искать основной DOM, а не Теневой DOM, где находится ваш элемент. Итак, используйте document.getElementById(), если вам нужно найти DOM и используйте this.$.elemendId, если вам нужно найти свой элемент для id.