diff --git a/Gruntfile.js b/Gruntfile.js index f9dc58647..6310bb816 100644 --- 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 index 4e9deae9c..bd32a4b6f 100644 --- 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 new file mode 100644 index 000000000..ab3dff6bd --- /dev/null +++ b/examples/css/validation.css @@ -0,0 +1,9 @@ +#error-msg { + color: red; +} +#valid-msg { + color: #00C900; +} +input.error { + border: 1px solid #FF7C7C; +} \ No newline at end of file diff --git a/examples/gen/country-sync.html b/examples/gen/country-sync.html index 769be86e9..ecc1cb94a 100644 --- a/examples/gen/country-sync.html +++ b/examples/gen/country-sync.html @@ -4,10 +4,10 @@ Example: Country sync - - + + - + @@ -79,7 +79,7 @@

Result

- - + + \ No newline at end of file diff --git a/examples/gen/default-country-ip.html b/examples/gen/default-country-ip.html index 0681de3d7..d763b14bf 100644 --- a/examples/gen/default-country-ip.html +++ b/examples/gen/default-country-ip.html @@ -4,8 +4,8 @@ Example: Lookup user's country - - + + @@ -31,7 +31,7 @@

Result

- - + + \ No newline at end of file diff --git a/examples/gen/default-styling.html b/examples/gen/default-styling.html index f47017edb..42b3b4b06 100644 --- a/examples/gen/default-styling.html +++ b/examples/gen/default-styling.html @@ -4,10 +4,10 @@ Example: Styling - - + + - + @@ -60,7 +60,7 @@

Result

- - + + \ No newline at end of file diff --git a/examples/gen/modify-country-data.html b/examples/gen/modify-country-data.html index d7fbe4262..daa1049fe 100644 --- a/examples/gen/modify-country-data.html +++ b/examples/gen/modify-country-data.html @@ -4,8 +4,8 @@ Example: Modify country data - - + + @@ -31,7 +31,7 @@

Result

- - + + \ No newline at end of file diff --git a/examples/gen/only-countries-europe.html b/examples/gen/only-countries-europe.html index def66485a..b7487cff9 100644 --- a/examples/gen/only-countries-europe.html +++ b/examples/gen/only-countries-europe.html @@ -4,8 +4,8 @@ Example: European countries - - + + @@ -32,7 +32,7 @@

Result

- - + + \ No newline at end of file diff --git a/examples/gen/validation.html b/examples/gen/validation.html index f8b0c2884..fa65f9b12 100644 --- a/examples/gen/validation.html +++ b/examples/gen/validation.html @@ -4,8 +4,10 @@ Example: Validation - - + + + + @@ -15,36 +17,50 @@

Example: Validation

Use public isValidNumber method (utilising Google's libphonenumber) to validate the telephone number on the change event.

Markup

- 
<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>

Code

- 
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");
 });

 
     
Result

     

-      
+       
+✓ Valid
+Invalid number
     

 
     
     
-    
-    
+    
+    
   
 
\ No newline at end of file
diff --git a/examples/js/validation.js b/examples/js/validation.js
index 528c0d5b1..90e69ffaf 100644
--- 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");
 });
\ No newline at end of file
diff --git a/examples/partials/validation.html b/examples/partials/validation.html
new file mode 100644
index 000000000..518fcc65a
--- /dev/null
+++ b/examples/partials/validation.html
@@ -0,0 +1,3 @@
+ 
+✓ Valid
+Invalid number
\ No newline at end of file
diff --git a/src/css/demo.scss b/src/css/demo.scss
index 7463ca09c..b1d1a1990 100644
--- 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;