Parsley + Unable to validate Email address For Full Width Character

Trying to write on Email Validation Check for Full Width Character Parsley :-

JS Code:-

window.Parsley.addValidator('validateFullWidthCharacters', {
  validateString: function(_value) {
    regex = /[\u3000-\u303F]|[\u3040-\u309F]|[\u30A0-\u30FF]|[\uFF00-\uFFEF]|[\u4E00-\u9FAF]|[\u2605-\u2606]|[\u2190-\u2195]|\u203B/;
    if (regex.test(_value)) {
      return false;
    } else {
      return true;
    }
  },
  messages: {
    en: 'Please enter a valid email address.'
  }
});

Works fine and validate the email by giving error message

ｒａｈｕｌ@ｍａｉｌ.ｃｏｍ

but if I changed the email to below one, does not work

rahul@ｍａｉｌ.ｃｏｍ

<input placeholder="e.g. mail@example.com" class="form-control parsley-success" id="user_email" data-parsley-required="" data-parsley-type="email" data-parsley-validate-full-width-characters="true" type="email" value="" name="user[email]" data-parsley-id="17">

Please give suggestion to resolve this.

Solution

Your regex just match fullwidth characters, you have to test your value with normal characters.

There is a bug or maybe an "expected behavior" with input type="email", that it converts fullwidth characters into normal ones if it is valid until @.

A solution for you is to change type="email" to type="text" and use another pattern for email and edit that if of you to return regex.test instead

regex = /^([a-z0-9_\.-]+\@[\da-z\.-]+\.[a-z\.]{2,6})$/gm

The new test

regex = /^([a-z0-9_\.-]+\@[\da-z\.-]+\.[a-z\.]{2,6})$/gm
/^([a-z0-9_\.-]+\@[\da-z\.-]+\.[a-z\.]{2,6})$/gm
regex.test('rahul@ｍａｉｌ.ｃｏｍ')
false
regex.test('ｒａｈｕｌ@mail.com')
false
regex.test('rahul@mail.com')
true

your code would become:

window.Parsley.addValidator('validateFullWidthCharacters', {
  validateString: function(_value) {
    regex = /^([a-z0-9_\.-]+\@[\da-z\.-]+\.[a-z\.]{2,6})$/gm;
    return regex.test(_value);
  },
  messages: {
    en: 'Please enter a valid email address.'
  }
});

html

<input placeholder="e.g. mail@example.com" class="form-control parsley-success" id="user_email" data-parsley-required="" data-parsley-type="email" data-parsley-validate-full-width-characters="true" type="text" value="" name="user[email]" data-parsley-id="17">

    window.Parsley
        .addValidator('validateFullWidthCharacters', {
            requirementType: 'string',
            validateString: function (value, requirement) {
                regex = /^([a-z0-9_\.-]+\@[\da-z\.-]+\.[a-z\.]{2,6})$/gm;
                return regex.test(value);
            },
            messages: {
                en: 'Please enter a valid email address.'
            }
        });

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.7.2/parsley.min.js"></script>
</head>
<body>

<form data-parsley-validate>
    <input type="text" name="email" placeholder="e.g. address@example.ext" data-parsley-validate-full-width-characters="true">
    <button>Submit</button>
</form>

</body>
</html>