Phone Length instant Validation

Hi @bouzzie,

The version 1.5.0 has been released with the necessary Javascript methods that allow developers to extend the client-side (inline) validation.

There is no documentation of this feature yet, however, it should be easy enough to follow the code in order to implement this custom validation.

Check the file plugins/fluid-checkout/js-src/checkout-validation.js, and refer to the example below which implements a custom validation for a delivery date field.

/**
 * Manage checkout front-end validation for: WooCommerce Order Delivery (by ThemeSquad)
 *
 * DEPENDS ON:
 * - checkout-validation.js // Main checkout validation script from Fluid Checkout
 */

(function (root, factory) {
	if ( typeof define === 'function' && define.amd ) {
		define([], factory(root));
	} else if ( typeof exports === 'object' ) {
		module.exports = factory(root);
	} else {
		root.CheckoutValidationWooCommerceOrderDelivery = factory(root);
	}
})(typeof global !== 'undefined' ? global : this.window || this.global, function (root) {

	'use strict';

	var $ = jQuery;

	var _hasInitialized = false;
	var _hasJQuery = ( $ != null );
	var _publicMethods = { };
	var _settings = {
		datePickerSelector: '#delivery_date',
		typeDeliveryDateSelector: '#delivery_date_visible',
		validationMessages: {
			out_of_range:     'The selected date "{selected_date}" is out of range. Please select a date from "{start_date}" to "{end_date}".',
			disabled:         'The selected date "{selected_date}" is not available.',
		},
	};

	/**
	 * METHODS
	 */

	/*!
	* Merge two or more objects together.
	* (c) 2017 Chris Ferdinandi, MIT License, https://gomakethings.com
	* @param   {Boolean}  deep     If true, do a deep (or recursive) merge [optional]
	* @param   {Object}   objects  The objects to merge together
	* @returns {Object}            Merged values of defaults and options
	*/
	var extend = function () {
		// Variables
		var extended = {};
		var deep = false;
		var i = 0;

		// Check if a deep merge
		if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) {
			deep = arguments[0];
			i++;
		}

		// Merge the object into the extended object
		var merge = function (obj) {
			for (var prop in obj) {
				if (obj.hasOwnProperty(prop)) {
					// If property is an object, merge properties
					if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
						extended[prop] = extend(extended[prop], obj[prop]);
					} else {
						extended[prop] = obj[prop];
					}
				}
			}
		};

		// Loop through each object and conduct a merge
		for (; i < arguments.length; i++) {
			var obj = arguments[i];
			merge(obj);
		}

		return extended;
    };

	/**
	 * Check if form row is required.
	 * @param  {Element}  formRow Form row element.
	 * @return {Boolean}          True if required.
	 */
	var isDeliveryDateField = function( formRow ) {
		if ( ! formRow.matches( _settings.typeDeliveryDateSelector ) ) { return false; }
		return true;
	};

	/**
	 * Validate date disabled.
	 * @param  {Field} field Field for validation.
	 */
	var validateDeliveryDateDisabled = function( field, formRow ) {
		// Bail if field does not have a value
		if ( ! CheckoutValidation.hasValue( field ) ) { return { valid: false }; }

		var datepicker = $( _settings.datePickerSelector ).data( 'wc_od_datepicker' ).getDatepicker();
		var dpg = $.fn.bootstrapDP.DPGlobal;
		var dateStr = $( '#delivery_date_visible' ).val();
		var date = dpg.parseDate( dateStr, dpg.parseFormat( 'yyyy-mm-dd' ) );
		var dateFormatted = dpg.formatDate( date, _settings.dateFormat, _settings.language );

		// Bail if date is disabled
		if ( datepicker.dateIsDisabled( date ) ) { return { valid: false, message: _settings.validationMessages.disabled.replace( '{selected_date}', dateFormatted ) }}

		// Field is valid
		return { valid: true };
	};

	/**
	 * Validate date out of range.
	 * @param  {Field} field Field for validation.
	 */
	 var validateDeliveryDateOutOfRange = function( field, formRow ) {
		// Bail if field does not have a value
		if ( ! CheckoutValidation.hasValue( field ) ) { return { valid: false }; }

		var datepicker = $( _settings.datePickerSelector ).data( 'wc_od_datepicker' ).getDatepicker();
		var dpg = $.fn.bootstrapDP.DPGlobal;
		var dateStr = $( '#delivery_date_visible' ).val();
		var date = dpg.parseDate( dateStr, dpg.parseFormat( 'yyyy-mm-dd' ) );
		var dateFormatted = dpg.formatDate( date, _settings.dateFormat, _settings.language );
		var startDateFormatted = dpg.formatDate( datepicker.getStartDate(), _settings.dateFormat, _settings.language );
		var endDateFormatted = dpg.formatDate( datepicker.getEndDate(), _settings.dateFormat, _settings.language );

		// Bail if date is disabled
		if ( datepicker.dateIsDisabled( date ) ) { return { valid: false }; }

		// Bail if date is out of range
		if ( date < datepicker.getStartDate() || date > datepicker.getEndDate() ) { return { valid: false, message: _settings.validationMessages.out_of_range.replace( '{selected_date}', dateFormatted ).replace( '{start_date}', startDateFormatted ).replace( '{end_date}', endDateFormatted ) }}

		// Field is valid
		return { valid: true };
	};

	/**
	 * Register validation types.
	 */
	var registerValidationTypes = function() {
		CheckoutValidation.registerValidationType( 'delivery_date_out_of_range', 'delivery-date-range', isDeliveryDateField, validateDeliveryDateOutOfRange );
		CheckoutValidation.registerValidationType( 'delivery_date_disabled', 'delivery-date-disabled', isDeliveryDateField, validateDeliveryDateDisabled );
	}

	/**
	 * Initialize component and set related handlers.
	 */
	_publicMethods.init = function( options ) {
		if ( _hasInitialized ) return;

		// Bail if <code>CheckoutValidation</code> is not available
		if ( ! window.CheckoutValidation ) { return; }

		// Merge settings
		_settings = extend( _settings, options );

		// Register validation types
		registerValidationTypes();

		_hasInitialized = true;
	};

	
	//
	// Public APIs
	//
	return _publicMethods;

});

If you need further assistance with this, please open a ticket on our support channel at:
https://support.fluidcheckout.com/portal/en/newticket

Best,
Diego