JS Animated. How to deal with validation of special characters in contact form

This tutorial will show you how to deal with validation of special characters in contact form of JS Animated template.

To adjust form validation you should edit /js/forms.js file.

1. Please change file encoding to UTF-8 first.

2. Search for the following code block:

".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
".message":{rx:/.{20}/,target:'textarea'}

Here you can adjust validation for form fields. We will adjust validation for name field as an example. We will adjust it to accept following special characters: á é í ó ú ü ñ

3. Edit following line of code:

".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},

and change it to:

".name":{rx:/^[a-zA-Z\á\é\í\ó\ú\ü\ñ'][a-zA-Z-\á\é\í\ó\ú\ü\ñ' ]+[a-zA-Z\á\é\í\ó\ú\ü\ñ']?$/,target:'input'},

Backslash \ should preceed each special symbol.

Form is accepting Latin and á é í ó ú ü ñ characters now.

Now we will adjust name field to accept Cyrillic (Russian) letters.

4. Edit following line of code:

".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},

and change it to:

".name":{rx:/^[a-zA-Zа-яА-ЯёЁ'][a-zA-Z-а-яА-ЯёЁ' ]+[a-zA-Zа-яА-ЯёЁ']?$/,target:'input'},

Form is accepting Latin and Cyrillic (Russian) characters now.

Feel free to check the detailed video tutorial below:

JS Animated. How to deal with validation of special characters in contact form