Categories

Featured templates

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

Aaron Liberman January 29, 2013
Rating: 5.0. From 1 vote.
Please wait...

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
This entry was posted in JS Animated tutorials and tagged charcters, contact, form, special, validation. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

  • Name

    Hello, I would like to add Cyrillic. I followed your instructions but when I receive the email the Cyrillic is unreadable. Please, help. Thank you!

    No votes yet.
    Please wait...
  • Name

    I fixed the problem by adding these 2 lines under the $headers line in MailHandler.php:
    $headers = ‘MIME-Version: 1.0’ . “rn”;
    $headers .= ‘Content-type: text/plain; charset=utf-8’ . “nn”;

    No votes yet.
    Please wait...
Live Chat
We help you to choose the right product.