Category
2018.04.26
【jQuery】exValidationに機種依存文字のルールを追加してみたよ
作業ノウハウ
さいさい
こんにちは！Webデザイナー兼もういくつ寝るとハーフ還暦担当のさいさいです。
先日フォームの改修案件で、「機種依存文字が入力されたらエラーを出す」というオーダーがありました。
わたしは普段フォームのバリデーションにはexValidationを使っているのですが、
exValidationのデフォルトには機種依存文字チェック含まれてないんですよねぇ…
なので、ルールを追加してみました！
今回は機種依存文字でしたが、応用すれば他にもルールを追加出来るので、
ご参考までにご紹介します✌(‘ ω ‘)✌
何はともあれダウンロード
まずは必要なファイルをダウンロードします✌(‘ ω ‘)✌
https://github.com/5509/exValidation
ダウンロードしたファイルのうち、実際に使うのは
・exvalidation.jsまたはexvalidation.min.js
・exchequer-ja.js
・exvalidation.css
の3ファイルです！
ベースになるHTMLを書くよ
早速HTMLを書いていきます！
先程ダウンロードしたファイルを読み込んで、
<link href="css/exvalidation.css" rel="stylesheet" /> https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js http://js/exValidation.js http://js/exchecker-ja.js
フォームを設置します！
<form id="validation">
<table>
<tr>
<th>会社名</th>
<td><input type="text" id="company" name="会社名"></td>
</tr>
<tr>
<th>住所</th>
<td><input type="text" id="address" name="住所"></td>
</tr>
</table>
</form>
機種依存文字といえば、㈱←これとか、ⅠⅡⅢ←これとか使いがちじゃない？ってことで
今回は会社名と住所の入力欄に機種依存文字のエラーをつけます✌(‘ ω ‘)✌
動かすためのjQuery記述も忘れずに
HTMLのbodyタグ内にexValidation.jsを動かすためのjQueryを記述します。
<body>～</body>ならどこでも良いみたいですが、外部ファイルにして読み込むと動かなくなるので注意です！
$(function() {
var validation = $("#validation").exValidation({
rules: {
company: "chkrequired",
address: "chkrequired"
},
errInsertPos: 'after',
errPosition: 'fixed'
});
});
今回は会社名も住所も必須項目にしてみました✌(‘ ω ‘)✌
ここに機種依存文字のエラーを追加していきます！
いよいよルールを追加しちゃうぞっ！
本題のルールの追加ですが、バリデーションのルールはexchecker-ja.jsに書かれていますので、このファイルを編集していきます✌(‘ ω ‘)✌
まずファイルを開くと冒頭に
;(function($) {
// Extend validation rules
$.exValidationRules = $.extend($.exValidationRules, {
chkrequired: [
～
],
こんな感じで書いてあると思いますので、
;(function($) {
// Extend validation rules
$.exValidationRules = $.extend($.exValidationRules, {
// ここから追加↓
chkkishu: [ // ルールの名前
"機種依存文字を使用しないでください", // エラーメッセージ
/^(?:[^①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ㍉㌔㌢㍍㌘㌧㌃㌶㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡㍻〝〟№㏍℡㊤㊥㊦㊧㊨㈱㈲㈹㍾㍽㍼]+)*$/
],
// ここまで追加↑
chkrequired: [
～
],
こんな感じで「chkkishu」というルールを追加します！
あとは先程のHTMLファイルの方に戻って
$(function() {
var validation = $("#validation").exValidation({
rules: {
company: "chkrequired chkkishu",
address: "chkrequired chkkishu"
},
errInsertPos: 'after',
errPosition: 'fixed'
});
});
「chkkishu」を追加すれば完了です！✌(‘ ω ‘)✌
まとめ
結構簡単に出来ちゃいました！＼(^o^)／
exValidationは普通に使うだけでも手軽に使えるのですが、
今回のようにカスタマイズも簡単に出来ちゃうのでオススメです！✌(‘ ω ‘)✌
こちらの記事も合わせてお読み下さい☆
