1.0.9

composer.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage2pro/phone"
-	,"version": "1.0.8"
+	,"version": "1.0.9"
 	,"description": "A telephone numbers handling library for my Magento 2 extensions."
 	,"type": "magento2-module"
 	,"homepage": "https://github.com/mage2pro/phone"
@@ -11,6 +11,6 @@
 		"homepage": "https://mage2.pro/users/dmitry_fedyuk",
 		"role": "Developer"
 	}]
-	,"require": {"mage2pro/core": ">=2.11.25", "giggsey/libphonenumber-for-php": ">=8.4.1"}
+	,"require": {"mage2pro/core": ">=2.11.30", "giggsey/libphonenumber-for-php": ">=8.4.1"}
 	,"autoload": {"files": ["registration.php"], "psr-4": {"Df\\Phone\\": ""}}
 }

view/base/web/main.js

@@ -1,6 +1,14 @@
 // 2017-09-06
 define([
 	'df-lodash', 'jquery', 'ko', 'Df_Phone/lib/js/main'
+   /**
+	* 2017-09-09
+	* It is not used by the binding itself,
+	* but in practice it is always used by the binding users, so I decided to place it here,
+	* and now the binding users can write define(['Df_Phone/main'], function() {...})
+	* instead of define(['Df_Phone/main', 'Df_Phone/validator'], function() {...})
+	*/
+	,'Df_Phone/validator'
 ], function (_, $, ko) {return (
 /**
  * 2017-09-06
@@ -136,30 +144,18 @@ function(c) {ko.bindingHandlers['df-phone'] = {init: function(e, accessor) {var
 		// this will not work and you will need to use the loadUtils method instead.»
 		// Type: string. Default: "".
 		,utilsScript: ''
-	}, config.options));
-	var $container = $e.closest('div.intl-tel-input');
-	var eValid = $container.siblings('.df-valid');
-	var eInvalid = $container.siblings('.df-invalid');
-	var reset = function() {eInvalid.addClass('df-hidden'); eValid.addClass('df-hidden');};
-	var validate = function() {
-		reset();
-		if ($.trim($e.val())) {
-			($e.intlTelInput('isValidNumber') ? eValid : eInvalid).removeClass('df-hidden');
-		}
-	};
-	/**
-	 * 2017-09-08
-	 * loadUtils():
-	 * https://github.com/jackocnr/intl-tel-input/blob/v12.0.2/build/js/intlTelInput.js#L1086-L1105
-	 * handleUtils():
-	 * https://github.com/jackocnr/intl-tel-input/blob/v12.0.2/build/js/intlTelInput.js#L938-L949
-	 */
-	require(['Df_Phone/lib/js/utils'], function() {
-		$.fn.intlTelInput.loadedUtilsScript = true;
-		$e.intlTelInput('handleUtils');
-		validate();
+	}, config.options)).done(function() {
+		/**
+		 * 2017-09-08
+		 * loadUtils():
+		 * https://github.com/jackocnr/intl-tel-input/blob/v12.0.2/build/js/intlTelInput.js#L1086-L1105
+		 * handleUtils():
+		 * https://github.com/jackocnr/intl-tel-input/blob/v12.0.2/build/js/intlTelInput.js#L938-L949
+		 */
+		require(['Df_Phone/lib/js/utils'], function() {
+			$.fn.intlTelInput.loadedUtilsScript = true;
+			$e.intlTelInput('handleUtils');
+		});
 	});
-	$e.blur(validate);
-	$e.on('change keyup', reset);
 	ko.utils.registerEventHandler(e, 'change', function() {config.storage(this.value);});
 }};});});

view/base/web/validator.js

@@ -0,0 +1,12 @@
+define(['df', 'Df_Phone/lib/js/utils', 'Df_Ui/validator'], function(df, utils, validator) {
+	var f = function(v) {
+		// 2017-09-09
+		// intlTelInputUtils.isValidNumber() accepts the Cyrillic letters
+		// as valid phone number characters for a some reason :-(
+		// E.g. intlTelInputUtils.isValidNumber('+552131398000ауувыа') returns `true`.
+		// So I have implemented an additional validation to reject such obviously invalid cases.
+		v = df.s.normalizePhone(v);
+		return /^\+\d+$/.test(v) && intlTelInputUtils.isValidNumber(v);
+	};
+	validator.add('phone', f, validator.peav('telephone number'));
+});