Skip to content

Instantly share code, notes, and snippets.

@goofmint

goofmint/index.js

Last active May 14, 2017
Embed
What would you like to do?
$(function() {
h5.core.controller('body', {
__name: 'sample.plugin.validationSampleController',
__ready:function() {
// バリデーターにルールやメッセージ等を設定
this.$find('#form1').validate({
// Submitイベントが実行された場合に、自動でバリデーションを実行
onsubmit: true,
// フォーカスが当たった場合に現在のエラー内容を一旦クリア
focusCleanup: true,
// バリデーションルール
rules: {
food: {
required: true
},
conf_tobacco: {
required: true
},
count: {
required: {
depends: '[name="conf_tobacco"][value="yes"]:checked'
},
number: {
depends: '[name="conf_tobacco"][value="yes"]:checked'
},
min: {
param: 1,
depends: '[name="conf_tobacco"][value="yes"]:checked'
},
max: {
param: 999,
depends: '[name="conf_tobacco"][value="yes"]:checked'
}
},
url: {
url: true
},
// useridをパラメータのキーにして、/existsに結果を問い合わせる
// サーバは"true"または"false"の文字列を返す必要がある
userid: {
required: true,
minlength: 6,
remote: '/exists'
},
pass: {
required: true,
rangelength: [8, 12]
},
conf_pass: {
equalTo: '[name="pass"]'
},
policy: {
required: true
}
},
messages: { // エラー時に表示するメッセージ
food: {
required: '1つ以上選択して下さい。'
},
conf_tobacco: {
required: 'はい、またはいいえを選択して下さい'
},
count: {
required: '「はい」を選択した場合は、喫煙本数を入力して下さい',
number: '本数は数字で入力して下さい',
min: '{0}以上の値を入力して下さい',
max: '{0}以下の値で入力して下さい'
},
url: {
url: '正しいURLを入力して下さい'
},
userid: {
required: 'ユーザIDを入力して下さい。',
minlength: '{0}以上で入力して下さい。',
remote: '入力されたユーザ名は既に使用されています'
},
pass: {
required: 'パスワードを入力して下さい',
rangelength: '{0}以上{1}文字以下で入力して下さい'
},
conf_pass: {
equalTo: 'パスワードが一致しません'
}
},
// エラーメッセージの表示先を指定する
errorPlacement: function(error, el) {
el.parent().children('.errorMsg').append(error);
},
// エラーがある要素毎に実行するコールバック
showErrors: function(errorMap, errorList) {
this.defaultShowErrors();
},
// 入力項目でエラーがあったときに実行されるハンドラ
highlight: this.ownWithOrg(this.highLightArea),
// エラーが解消されたときに実行されるハンドラ,
unhighlight: this.ownWithOrg(this.unHighLightArea),
// validateのチェックが通り、submitが行われるときに実行するハンドラ
submitHandler: this.ownWithOrg(this.submitHandler),
// validateでエラーが1つでもあると実行されるハンドラ
invalidHandler: this.ownWithOrg(this.invalidHandler),
// 入力項目でエラーが解消されるたびに実行されるハンドラ
success: this.ownWithOrg(this.successHandler)
});
},
highLightArea: function(orgThis, el, error, errorClass) {
$(el).css('background-color', 'red');
},
unHighLightArea: function(orgThis, el, error, errorClass) {
var $el = $(el);
$el.css('background-color', '');
// 操作した要素が「1日の喫煙本数」テキストボックスでかつ、「たばこを吸っていますか」チェックボックスが「いいえ」の場合は、
// 「1日の喫煙本数」テキストボックスのハイライトを除去する
if ($el.is('[name="conf_tobacco"]') && this.$find('[name="conf_tobacco"]:checked').val() === 'no') {
this.$find('[name="count"]').css('background-color', '');
}
},
submitHandler: function(orgThis, form, ev) {
alert('FORMの内容をサーバに送信します。');
form.submit();
},
invalidHandler: function(orgThis, ev, validator) {
alert('入力内容に誤りがあります。');
},
successHandler: function(orgThis, errMsgElement, inputElement) {
if (window.console) {
console.log('入力OK: '+ inputElement.name);
}
},
//「好きな食べ物を選択して下さい」のバリデーション
'[name="food"] click': function(context, $ct) {
// input[name="food"]の要素に対してバリデーションを実行する
$ct.valid();
},
//「1日の喫煙本数」テキストボックスのバリデーション
'[name="count"] focusout': function(context, $ct) {
// input[name="count"]の要素に対してバリデーションを実行する
$ct.valid();
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment