parsley.jsの2バイト文字判定

社内プロジェクトのフォームに使用しているバリデーション「parsley.js」ですが、どうもメールアドレスのバリデーションで、メールアドレス形式になっていれば２バイト文字が含まれていても通ってしまうようです。
※全角アットマークは通常でも弾かれます

例）aaあaa@.gmail.com

上記本家サンプルフォームでも通ってしまっています・・・。

そこでCustom Validators機能を使い、２バイト文字が含まれているかをチェックするバリデーションを追加することで対応しています。
そのコードが以下です

対象のINPUT要素にDATA属性「data-parsley-multibyte=''」を追加します。
もちろん、他の条件（data-parsley-type='email'など）と併用可能です。

sample.haml

= f.input :customer_email, placeholder: '例：[e-mail]', label: false, input_html: {data: {parsley_required: true, parsley_required_message: 'メールアドレスを入力してください。', parsley_trigger: 'change', parsley_type: 'email', parsley_multibyte: ''}}, required: false

※追加したDATA属性の「multibyte」の部分は以下のJSコードと合わせて変更すれば任意なものでも大丈夫です。

sample.js

window.Parsley.addValidator('multibyte', {
  validateString: function(value) {
    return value.match(/[^ -~｡-ﾟ\t]/) === null;
  },
  messages: {
    en: '半角で入力してください',
  }
});

上記JSコードは必ずparsley.jsの後で読み込まれる場所に記述してください。

en: '半角で入力してください'
ご自身が使用しているi18nのlocaleに合わせて適宜変更してください。

もっとスマートな方法があるかもしれませんのであしからず！！