Print Preview: Show error message if text is typed in Copies section

chrome/browser/resources/print_preview/settings/copies_settings.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('print_preview', function() {
   'use strict';
 
   /**
    * Component that renders the copies settings UI.
    * @param {!print_preview.ticket_items.Copies} copiesTicketItem Used to read
@@ skipping 101 matching lines @@
           print_preview.ticket_items.TicketItem.EventType.CHANGE,
           this.updateState_.bind(this));
     },
 
     /**
      * Updates the state of the copies settings UI controls.
      * @private
      */
     updateState_: function() {
       if (this.isAvailable()) {
+        if (!this.inputField_.validity.valid) {
+          this.inputField_.classList.add('invalid');
+          fadeInElement(this.getChildElement('.hint'));
+          this.getChildElement('.collate-container').hidden = true;
+          this.updateUiStateInternal();
+          return;
+        }
         if (this.inputField_.value != this.copiesTicketItem_.getValue())
           this.inputField_.value = this.copiesTicketItem_.getValue();
-
-        var currentValueGreaterThan1 = false;
-        if (this.copiesTicketItem_.isValid()) {
-          this.inputField_.classList.remove('invalid');
-          fadeOutElement(this.getChildElement('.hint'));
-          var currentValue = this.copiesTicketItem_.getValueAsNumber();
-          currentValueGreaterThan1 = currentValue > 1;
-        } else {
-          this.inputField_.classList.add('invalid');
-          fadeInElement(this.getChildElement('.hint'));
-        }
-
+        this.inputField_.classList.remove('invalid');
+        fadeOutElement(this.getChildElement('.hint'));
         if (!(this.getChildElement('.collate-container').hidden =
                !this.collateTicketItem_.isCapabilityAvailable() ||
-               !currentValueGreaterThan1)) {
+               this.copiesTicketItem_.getValueAsNumber() <= 1)) {
           this.getChildElement('input.collate').checked =
               this.collateTicketItem_.getValue();
         }
       }
       this.updateUiStateInternal();
     },
 
     /**
      * Called after a timeout after user input into the textfield.
      * @private
      */
     onTextfieldTimeout_: function() {
       this.textfieldTimeout_ = null;
-      var copiesVal = this.inputField_.value;
-      if (copiesVal != '') {
-        this.copiesTicketItem_.updateValue(copiesVal);
+      var newValue = (this.inputField_.validity.valid &&
+                      this.inputField_.value != '') ?
+                      this.inputField_.valueAsNumber.toString() : '';
+      if (this.copiesTicketItem_.getValue() === newValue) {
+        this.updateState_();
+        return;
       }
+      this.copiesTicketItem_.updateValue(newValue);
     },
 
     /**
      * Called when a key is pressed on the custom input.
      * @param {Event} event Contains the key that was pressed.
      * @private
      */
     onTextfieldKeyDown_: function(event) {
       if (event.keyCode != 'Enter')
         return;
@@ skipping 16 matching lines @@
           this.onTextfieldTimeout_.bind(this),
           CopiesSettings.TEXTFIELD_DELAY_MS_);
     },
 
     /**
      * Called when the focus leaves the textfield. If the textfield is empty,
      * its value is set to 1.
      * @private
      */
     onTextfieldBlur_: function() {
-      if (this.inputField_.value == '') {
+      if (this.inputField_.validity.valid && this.inputField_.value == '') {
         if (this.copiesTicketItem_.getValue() == '1') {
           // No need to update the ticket, but change the display to match.
           this.inputField_.value = '1';
         } else {
           setTimeout((function() {
             this.copiesTicketItem_.updateValue('1');
           }).bind(this), 0);
         }
       }
     },
 
     /**
      * Called when the collate checkbox is clicked. Updates the print ticket.
      * @private
      */
     onCollateCheckboxClick_: function() {
       this.collateTicketItem_.updateValue(
           this.getChildElement('input.collate').checked);
     }
   };
 
   // Export
   return {
     CopiesSettings: CopiesSettings
   };
 });