Postcode mask

[remcotolsma]

Is het mogelijk om te werken met een postcode-masker zonder dat dit de werking van de postcode api in de weg zit? Dit is de vraag van onze developer, die wil graag alle postcodes in 1 format binnenkrijgen in verband met het centrale portaal dat we aan het bouwen zijn.

Gravity Forms does have support for masks:

Admin

Preview

I think Gravity Forms uses the following library: https://github.com/igorescobar/jQuery-Mask-Plugin

I don't think it is very easy for a third party to check whether a Gravity Forms field has been filled in correctly / completely.

<input pattern="regexp">

There is also the HTML input pattern attribute. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern

We could use this in combination with the checkValidity method:

console.log( document.getElementById( 'test' ).checkValidity() );

console.log( document.getElementById( 'test' ).validity );

• https://developer.mozilla.org/en-US/docs/Web/CSS/:valid
• https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
• https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

In https://gitlab.com/pronamic-themes/dmb/-/blob/develop/js/script.js#L210-251 is also some custom code in place for validation.

We could also use minlength and maxlength attributes: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text

[kjtolsma]

But is there a specific reason why the autocomplete request isn't firing if a mask is active? See video.

https://user-images.githubusercontent.com/1701552/152130764-7f5c744e-e047-4a8b-866d-0b954ddace9f.mov

.

[remcotolsma]

I see that Gravity Forms uses the following library: https://github.com/RubtsovAV/jquery.maskedinput/blob/1.4.1/src/jquery.maskedinput.js#L254. We hook into the change event within Pronamic Maps, but apparently jquery.maskedinput does something that prevents that event from being executed (preventDefault()?)

https://github.com/pronamic/wp-pronamic-maps/blob/f00c683ac0aecfa18fccbd487671e427ece6001f/js/pronamic-maps.js#L64-L66

The jquery.maskedinput library is also a bit outdated: https://github.com/digitalBush/jquery.maskedinput

Notice: This project is no longer being maintained.

I started this project over 10 years ago to fill a need for a side project I was working on at the time. Nothing ever became of that side project, but this little plugin lived on. Over the years it brought me joy to stumble on sites using this thing. It was super encouraging to hear from people using it in their own products. I tried for a while to maintain it, even after I had moved away from front end web development.

The time has come to officially call it quits. The web has changed(A LOT) and there are better things out there like Cleave.js. I'll leave this repo up for posterity in an archived state. Thank you to everyone who contributed to or used this plugin over the years.

As far as i can see, there is no easy way to add support for the outdated jquery.maskedinput library.

[remcotolsma]

The jquery.maskedinput library executes the deprecated jQuery.fn.change() function:

https://github.com/RubtsovAV/jquery.maskedinput/blob/f19728180c604c1b0c62d6aa97af262c0c04d71c/src/jquery.maskedinput.js#L228

This seems to be a jQuery event which can't be handled through a addEventListener function.

• https://github.com/jquery/jquery/issues/2476
• https://getbootstrap.com/docs/5.1/getting-started/javascript/#jquery-events

Therefor did the following change:

var gravityforms = document.querySelectorAll( '.gform_wrapper' );

gravityforms.forEach( ( gravityform ) => {
    gravityform.addEventListener( 'change', function( event ) {
        pronamicMapsAutocomplete( gravityform, event.target );
    } );

    pronamicMapsAutocomplete( gravityform );    
} );

to:

jQuery( '.gform_wrapper' ).on( 'change', function( event ) {
    pronamicMapsAutocomplete( this, event.target );
} );

https://github.com/pronamic/wp-pronamic-maps/commit/457a4f768d4b14017cea7e86c2e366d7520d394d

[remcotolsma]

I think that no further action is needed within this issue for now.