T1299

less/app-install.less

@@ -129,6 +129,10 @@
       font-size: 14px;
       border-radius: @corner-radius;
       border: 2px solid rgb(150, 150, 150);
+
+      &.invalid {
+        border-color: @red;
+      }
     }
 
     .message-sent-container,
@@ -180,6 +184,18 @@
     }
   }
 
+  .phone-error-popup {
+    color: @white;
+    padding-bottom: 5px;
+    opacity: 1;
+
+    transition: opacity .2s;
+
+    &.off {
+      opacity: 0;
+    }
+  }
+
   .btn {
     background-color: #FACD34;
     color: #4B5B62;

locale/en_US/app.json

@@ -51,6 +51,10 @@
     "message": "Uh oh! We're having trouble sending you the install link, try reloading the page and submitting your number again.",
     "description": "Error text displayed if submitting a phone number fails"
   },
+  "phone format error" : {
+    "message": "Make sure you've entered a valid phone number.",
+    "description": "Error text displayed if phone number is invalid"
+  },
   "sms privacy message": {
     "message": "Text messages are sent to your phone via a company called Twilio. This information will be stored for no more than 30 days, and will not be used for any other purposes. For more information, see <a href=\"https://www.twilio.com/legal/privacy\">Twilio's privacy policy</a>.",
     "description": "Warning message about Mozilla and Twilio's privacy policies"

public/js/pages/install-app.js

@@ -16,6 +16,7 @@ require(["jquery", "analytics", "intl-tel-input"], function ($, analytics) {
     phoneNumberLabel = $(".phone-number-label"),
     getAppBtn = $(".desktop-install-app-btn"),
     phoneNumberInput = $(".phone-num-input"),
+    phoneNumberInputError = $(".phone-error-popup"),
     sendSmsButton = $(".send-sms-btn"),
     messageSent = $(".message-sent-container"),
     messageSentError = $(".message-sent-error-container"),
@@ -74,6 +75,21 @@ require(["jquery", "analytics", "intl-tel-input"], function ($, analytics) {
     sendSmsButton.attr("disabled", !phoneNumberInput.intlTelInput("isValidNumber"));
   });
 
+  phoneNumberInput.focus(function () {
+    phoneNumberInput.removeClass("invalid");
+    phoneNumberInputError.addClass("off");
+  });
+
+  phoneNumberInput.blur(function () {
+    if (phoneNumberInput.intlTelInput("isValidNumber")) {
+      phoneNumberInput.removeClass("invalid");
+      phoneNumberInputError.addClass("off");
+    } else if (phoneNumberInput.val().trim().length > 0) {
+      phoneNumberInput.addClass("invalid");
+      phoneNumberInputError.removeClass("off");
+    }
+  });
+
   sendSmsButton.click(sendSMS);
 
   sendSmsButton.keypress(function (evt) {

views/app.html

@@ -72,6 +72,11 @@
             <span>{{ gettext("message sent error") }}</span>
           </div>
         </div>
+        <div class="col-lg-12 pull-left">
+          <div class="col-lg-8 pull-left">
+            <div class="phone-error-popup off">{{ gettext("phone format error") }}</div>
+          </div>
+        </div>
         <div class="col-lg-12 sms-privacy-message pull-left hidden">
           <div class="col-lg-8 pull-left">
             {{ gettext("sms privacy message") | safe }}