added error/success msg on validation example

jackocnr · Feb 26, 2014 · 83d8c04 · 83d8c04
1 parent fb3bedd
commit 83d8c04
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 51 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -207,8 +207,8 @@ module.exports = function(grunt) {
             time: time,
             title: "Validation",
             desc: "Use public isValidNumber method (utilising Google's libphonenumber) to validate the telephone number on the change event.",
-            stylesheet: '',
-            markup: grunt.file.read('examples/partials/simpleInput.html'),
+            stylesheet: 'validation.css',
+            markup: grunt.file.read('examples/partials/validation.html'),
             code: grunt.file.read('examples/js/validation.js'),
             script: "validation.js"
           }

diff --git a/build/css/demo.css b/build/css/demo.css
@@ -8,6 +8,9 @@ body {
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   color: #555; }
 
+.hide {
+  display: none; }
+
 pre {
   margin: 0 !important;
   display: inline-block; }
@@ -35,10 +38,6 @@ input, select {
   border: 1px solid #CCC;
   width: 250px; }
 
-input.error {
-  background-color: #FFE7E7;
-  border: 1px solid #FF7C7C; }
-
 button {
   color: #FFF;
   background-color: #428BCA;

diff --git a/examples/css/validation.css b/examples/css/validation.css
@@ -0,0 +1,9 @@
+#error-msg {
+  color: red;
+}
+#valid-msg {
+  color: #00C900;
+}
+input.error {
+  border: 1px solid #FF7C7C;
+}
diff --git a/examples/gen/country-sync.html b/examples/gen/country-sync.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8">
     <title>Example: Country sync</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1393390464893">
-    <link rel="stylesheet" href="../../build/css/demo.css?1393390464893">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1393391557933">
+    <link rel="stylesheet" href="../../build/css/demo.css?1393391557933">
 
-      <link rel="stylesheet" href="../css/countrySync.css?1393390464893">
+      <link rel="stylesheet" href="../css/countrySync.css?1393391557933">
 
   </head>
 
@@ -79,7 +79,7 @@ <h2>Result</h2>
 
     <script src="../js/prism.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="../../build/js/intlTelInput.js?1393390464893"></script>
-    <script src="../js/countrySync.js?1393390464893"></script>
+    <script src="../../build/js/intlTelInput.js?1393391557933"></script>
+    <script src="../js/countrySync.js?1393391557933"></script>
   </body>
 </html>
diff --git a/examples/gen/default-country-ip.html b/examples/gen/default-country-ip.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: Lookup user&#39;s country</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1393390464893">
-    <link rel="stylesheet" href="../../build/css/demo.css?1393390464893">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1393391557933">
+    <link rel="stylesheet" href="../../build/css/demo.css?1393391557933">
 
   </head>
 
@@ -31,7 +31,7 @@ <h2>Result</h2>
 
     <script src="../js/prism.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="../../build/js/intlTelInput.js?1393390464893"></script>
-    <script src="../js/defaultCountryIp.js?1393390464893"></script>
+    <script src="../../build/js/intlTelInput.js?1393391557933"></script>
+    <script src="../js/defaultCountryIp.js?1393391557933"></script>
   </body>
 </html>
diff --git a/examples/gen/default-styling.html b/examples/gen/default-styling.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8">
     <title>Example: Styling</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1393390464893">
-    <link rel="stylesheet" href="../../build/css/demo.css?1393390464893">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1393391557933">
+    <link rel="stylesheet" href="../../build/css/demo.css?1393391557933">
 
-      <link rel="stylesheet" href="../css/defaultStyling.css?1393390464893">
+      <link rel="stylesheet" href="../css/defaultStyling.css?1393391557933">
 
   </head>
 
@@ -60,7 +60,7 @@ <h2>Result</h2>
 
     <script src="../js/prism.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="../../build/js/intlTelInput.js?1393390464893"></script>
-    <script src="../js/defaultStyling.js?1393390464893"></script>
+    <script src="../../build/js/intlTelInput.js?1393391557933"></script>
+    <script src="../js/defaultStyling.js?1393391557933"></script>
   </body>
 </html>
diff --git a/examples/gen/modify-country-data.html b/examples/gen/modify-country-data.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: Modify country data</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1393390464893">
-    <link rel="stylesheet" href="../../build/css/demo.css?1393390464893">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1393391557933">
+    <link rel="stylesheet" href="../../build/css/demo.css?1393391557933">
 
   </head>
 
@@ -31,7 +31,7 @@ <h2>Result</h2>
 
     <script src="../js/prism.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="../../build/js/intlTelInput.js?1393390464893"></script>
-    <script src="../js/modifyCountryData.js?1393390464893"></script>
+    <script src="../../build/js/intlTelInput.js?1393391557933"></script>
+    <script src="../js/modifyCountryData.js?1393391557933"></script>
   </body>
 </html>
diff --git a/examples/gen/only-countries-europe.html b/examples/gen/only-countries-europe.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: European countries</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1393390464893">
-    <link rel="stylesheet" href="../../build/css/demo.css?1393390464893">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1393391557933">
+    <link rel="stylesheet" href="../../build/css/demo.css?1393391557933">
 
   </head>
 
@@ -32,7 +32,7 @@ <h2>Result</h2>
 
     <script src="../js/prism.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="../../build/js/intlTelInput.js?1393390464893"></script>
-    <script src="../js/onlyCountriesEurope.js?1393390464893"></script>
+    <script src="../../build/js/intlTelInput.js?1393391557933"></script>
+    <script src="../js/onlyCountriesEurope.js?1393391557933"></script>
   </body>
 </html>
diff --git a/examples/gen/validation.html b/examples/gen/validation.html
@@ -4,8 +4,10 @@
     <meta charset="utf-8">
     <title>Example: Validation</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1393390464893">
-    <link rel="stylesheet" href="../../build/css/demo.css?1393390464893">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1393391557933">
+    <link rel="stylesheet" href="../../build/css/demo.css?1393391557933">
+
+      <link rel="stylesheet" href="../css/validation.css?1393391557933">
 
   </head>
 
@@ -15,36 +17,50 @@ <h1>Example: Validation</h1>
     <p>Use public isValidNumber method (utilising Google&#39;s libphonenumber) to validate the telephone number on the change event.</p>
 
     <h2>Markup</h2>
-    <pre><code class="language-markup">&lt;input id=&quot;phone&quot; type=&quot;tel&quot; placeholder=&quot;e.g. +1 702 123 4567&quot;&gt;</code></pre>
+    <pre><code class="language-markup">&lt;input id=&quot;phone&quot; type=&quot;tel&quot; placeholder=&quot;e.g. +1 702 123 4567&quot;&gt; 
+&lt;span id=&quot;valid-msg&quot; class=&quot;hide&quot;&gt;✓ Valid&lt;/span&gt;
+&lt;span id=&quot;error-msg&quot; class=&quot;hide&quot;&gt;Invalid number&lt;/span&gt;</code></pre>
 
     <h2>Code</h2>
-    <pre><code class="language-javascript">var telInput = $(&quot;#phone&quot;);
+    <pre><code class="language-javascript">var telInput = $(&quot;#phone&quot;),
+  errorMsg = $(&quot;#error-msg&quot;),
+  validMsg = $(&quot;#valid-msg&quot;);
 
 // initialise plugin
 telInput.intlTelInput({
   validationScript: &quot;../../lib/libphonenumber/build/isValidNumber.js&quot;
 });
 
-// on blur: check for errors
+// on blur: validate
 telInput.blur(function() {
-  if ($.trim(telInput.val()) &amp;&amp; !telInput.intlTelInput(&quot;isValidNumber&quot;)) {
-    $(this).addClass(&quot;error&quot;);
+  if ($.trim(telInput.val())) {
+    if (telInput.intlTelInput(&quot;isValidNumber&quot;)) {
+      validMsg.removeClass(&quot;hide&quot;);
+    } else {
+      telInput.addClass(&quot;error&quot;);
+      errorMsg.removeClass(&quot;hide&quot;);
+      validMsg.addClass(&quot;hide&quot;);
+    }
   }
 });
 
-// on keydown: remove any error
+// on keydown: reset
 telInput.keydown(function() {
-  $(this).removeClass(&quot;error&quot;);
+  telInput.removeClass(&quot;error&quot;);
+  errorMsg.addClass(&quot;hide&quot;);
+  validMsg.addClass(&quot;hide&quot;);
 });</code></pre>
 
     <h2>Result</h2>
     <div id="result">
-      <input id="phone" type="tel" placeholder="e.g. +1 702 123 4567">
+      <input id="phone" type="tel" placeholder="e.g. +1 702 123 4567"> 
+<span id="valid-msg" class="hide">✓ Valid</span>
+<span id="error-msg" class="hide">Invalid number</span>
     </div>
 
     <script src="../js/prism.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="../../build/js/intlTelInput.js?1393390464893"></script>
-    <script src="../js/validation.js?1393390464893"></script>
+    <script src="../../build/js/intlTelInput.js?1393391557933"></script>
+    <script src="../js/validation.js?1393391557933"></script>
   </body>
 </html>
diff --git a/examples/js/validation.js b/examples/js/validation.js
@@ -1,18 +1,28 @@
-var telInput = $("#phone");
+var telInput = $("#phone"),
+  errorMsg = $("#error-msg"),
+  validMsg = $("#valid-msg");
 
 // initialise plugin
 telInput.intlTelInput({
   validationScript: "../../lib/libphonenumber/build/isValidNumber.js"
 });
 
-// on blur: check for errors
+// on blur: validate
 telInput.blur(function() {
-  if ($.trim(telInput.val()) && !telInput.intlTelInput("isValidNumber")) {
-    $(this).addClass("error");
+  if ($.trim(telInput.val())) {
+    if (telInput.intlTelInput("isValidNumber")) {
+      validMsg.removeClass("hide");
+    } else {
+      telInput.addClass("error");
+      errorMsg.removeClass("hide");
+      validMsg.addClass("hide");
+    }
   }
 });
 
-// on keydown: remove any error
+// on keydown: reset
 telInput.keydown(function() {
-  $(this).removeClass("error");
+  telInput.removeClass("error");
+  errorMsg.addClass("hide");
+  validMsg.addClass("hide");
 });
diff --git a/examples/partials/validation.html b/examples/partials/validation.html
@@ -0,0 +1,3 @@
+<input id="phone" type="tel" placeholder="e.g. +1 702 123 4567"> 
+<span id="valid-msg" class="hide">✓ Valid</span>
+<span id="error-msg" class="hide">Invalid number</span>
diff --git a/src/css/demo.scss b/src/css/demo.scss
@@ -11,6 +11,10 @@ body {
   color: #555;
 }
 
+.hide {
+  display: none;
+}
+
 // example code blocks
 pre {
   margin: 0 !important; // override prism.css
@@ -49,11 +53,6 @@ input, select {
   width: 250px;
 }
 
-input.error {
-  background-color: #FFE7E7;
-  border: 1px solid #FF7C7C;
-}
-
 // borrowed from bootstrap
 button {
   color: #FFF;