Add validation pattern on wp:jetpack/field-url

Resolved Terence Eden
(@edent)

1 year, 2 months ago

I am using the “Website Field” block on a feedback form. The block type is wp:jetpack/field-url

I want to restrict what users can enter by using the pattern attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern

E.g. https:\/\/example.com\/.*

Is it possible to add further attributes to these blocks? If so, how?

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Contributor Karen Attfield
(@wpkaren)

1 year, 2 months ago
Hi there,

Adding the pattern attribute looks like it would be a good enhancement to the field-url field! I’ve submitted an enhancement request with this suggestion: https://github.com/Automattic/jetpack/issues/42205

However, you may also have some options available to you if you are comfortable experimenting with some code snippets on your site. I’d recommend a functionality plugin such as what we suggest here:

https://jetpack.com/support/adding-code-snippets/

While we don’t officially provide customization support, if you have some experience of hooking into filters you may have some level of success by hooking into the grunion_contact_form_field_html filter to modify the HTML, specifically the pattern value:

https://developer.jetpack.com/hooks/grunion_contact_form_field_html/

I have come up with a fairly rudimentary example you may be able to experiment with. Bear in mind with this though that the pattern used at our end could change rendering this non-functional. Also, the validation is also only on the front-end here (there is further validation done after the form is submitted, but presuming the inputted URL would otherwise normally pass standard URL validation that should be fine), and assumes the field label is ‘Website’:
```
add_filter( 'grunion_contact_form_field_html', function( $rendered_field, $field_label, $id ) {
    if ( $field_label === 'Website' ) {
        $rendered_field = str_replace(
            'pattern="(?:(?:[Hh][Tt][Tt][Pp][Ss]?|[Ff][Tt][Pp]):\/\/)?(?:\S+(?::\S*)?@|\d{1,3}(?:\.\d{1,3}){3}|(?:(?:[a-zA-Z\d\u00a1-\uffff]+-?)*[a-zA-Z\d\u00a1-\uffff]+)(?:\.(?:[a-zA-Z\d\u00a1-\uffff]+-?)*[a-zA-Z\d\u00a1-\uffff]+)*(?:\.[a-zA-Z\u00a1-\uffff]{2,6}))(?::\d+)?(?:[^\s]*)?"',
            'pattern="https:\/\/example.com\/.*?"',
            $rendered_field
        );
    }
    return $rendered_field;
}, 10, 3 );
```
As we don’t generally provide customization support though (our scope of support for reference: https://jetpack.com/support/scope-of-support/), we wouldn’t be able to continue debugging that specific snippet if there are any issues, but hopefully it allows you to experiment with different changes to your form.

As for other attributes, the approach could be similar, but depending on the attribute it may also be something we can request be added within Jetpack itself. If there is anything in particular you would like to see added to any of the Jetpack contact form fields, do let us know.
Plugin Contributor Karen Attfield
(@wpkaren)

1 year, 2 months ago
Adding a quick follow-up with an improvement to that snippet I shared earlier, avoiding the need for the strict pattern check:
```
add_filter( 'grunion_contact_form_field_html', function( $rendered_field, $field_label, $id ) {
    if ( $field_label === 'Website' ) {
        $rendered_field = preg_replace(
            '/pattern="([^"]*)"/',
            'pattern="https:\/\/example\.com\/.*"',
            $rendered_field
        );
    }
    return $rendered_field;
}, 10, 3 );
```
Plugin Support Tamirat B. (a11n)
(@tamirat22)

1 year, 2 months ago

Hello @edent,

It’s been one week since this topic was last updated. I’m going to mark this thread as solved. If you have any further questions or need more help, you’re welcome to open another thread here. Cheers!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Add validation pattern on wp:jetpack/field-url’ is closed to new replies.

Tags