How to implement a custom JavaScript validator for a backend configuration field?

dmitrii_fediuk · July 9, 2017, 1:12am

I will use my df-validate-domain validator as an example.
It validates a domain name.

An invalid value:

A valid value:

1. view/adminhtml/layout/adminhtml_system_config_edit.xml

mage2pro/core/blob/2.7.44/Config/view/adminhtml/layout/adminhtml_system_config_edit.xml#L9-L11


		<referenceContainer name='after.body.start'>
			<block class='Df\Config\Js' name='Df_Config_Js'/>
		</referenceContainer>

2. Df\Config\Js

github.com

mage2pro/core/blob/2.7.44/Config/Js.php#L2-L15


namespace Df\Config;
use Magento\Framework\View\Element\AbstractBlock as _P;
// 2017-07-09
/** @final Unable to use the PHP «final» keyword here because of the M2 code generation. */
class Js extends _P {
	/**
	 * 2017-07-09
	 * @override
	 * @see _P::_toHtml()
	 * @used-by \Magento\Framework\View\Element\AbstractBlock::toHtml()
	 * @return string
	 */
	final protected function _toHtml() {return df_js(__CLASS__);}
}

3. main.js

github.com

mage2pro/core/blob/2.7.44/Config/view/adminhtml/web/main.js#L3-L8


	require(['mage/validation'], function(){
		/** @type {Object} */
		$.validator.addMethod('df-validate-domain', function(v, e){return this.optional(e) ||
			/^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+$/.test(v)
		;}, $.mage.__("Please enter a valid <a href='https://en.wikipedia.org/wiki/Domain_name' target='_blank'>domain name</a>."));
	});

4. Usage

github.com

mage2pro/salesforce/blob/0.0.2/etc/adminhtml/system.xml#L45-L60


				<field
					id='domain'
					showInDefault='1' showInStore='1' showInWebsite='1'
					sortOrder='2'
					translate='label'
					type='text'
				>
					<label>Your Salesforce domain</label>
					<comment><![CDATA[You can find it out in your browser's address bar after logging into your Salesforce application.
<br/>Please specify the <b><a href='https://en.wikipedia.org/wiki/Domain_name' target='_blank'>domain name</a> only</b>, without a protocol and path.
<br/>For example, if you see <code>https://mage2pro-dev-ed.lightning.force.com/one/one.app#/setup/home?a:t=1499557450454</code> in your browser's address bar, then your domain is <code>mage2pro-dev-ed.lightning.force.com</code>.]]></comment>
					<depends>
						<field id='enable'>1</field>
					</depends>
					<validate>required-entry df-validate-domain</validate>
				</field>

dmitrii_fediuk · July 9, 2017, 1:16am