1.バリデートラプラグインのインポート
<script src="./asset/lib/parsley/parsley.js"></script>
<script src="./asset/lib/parsley/i18n/ja.js"></script>
2.バリデートから除外する要素の指定
var $workForm = $('#work-form');
//バリデート
var $parsleyWorkForm = $workForm.parsley(
{
//excluded:"input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], div[data-trigger-switch-id]:hidden *",
excluded: 'input[type=button], input[type=submit], input[type=reset]',
//hiddenもバリデートに含めるように指定
inputs: 'input, textarea, select, input[type=hidden], :hidden',
classHandler: function (ParsleyField) {
//alert("classHandler");
},
errorsContainer: function (ParsleyField) {
//alert("errorsContainer");
}
}
);
3.グループ指定実行
$(':radio[name=think]').change(function(){
$parsleyWorkForm.validate({group: 'answers'});
$parsleyWorkForm.validate({group: "answers-validate"});
});
4.簡単なサンプル
window.Parsley
.addValidator('pairInput2', {
requirementType: 'string',
validateString: function(value, requirement) {
//alert("[カスタムバリデータ]answerAll" + value);
var result = true;
var inputName = requirement;
var $input = $(':text[name="' + inputName + '"]');
var prevInputValue = $input.prev().prev().val();
//alert(prevInputValue);
if(prevInputValue == PAIR_INPUT_BLANK_STR && value != "") {
result = false;
}
return result;
},
messages: {
ja: '上記3の「考えたこと」の根拠を入力してから記入してください。',
en: ''
}
});
5.フォーカス削除
<form id="work-form" action="" method="post" data-parsley-focus="none">
6.再入力サンプル
<input type="email" class="width-full" id='mailaddress2' name="mailaddress2" maxlength="80" data-parsley-required="true" >
<input type="email" class="width-full" maxlength="80" id='mailaddress2-confirm' data-parsley-equalto="[name='mailaddress2']" data-parsley-required="true">