Last active
November 28, 2015 17:09
-
-
Save kazuki-aruga/8703646 to your computer and use it in GitHub Desktop.
jQuery-Validation-Plugin Bootstrap 連携サンプル
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="ja"> | |
<head> | |
<meta charset="utf-8"> | |
<title>jQuery-Validation-Plugin Bootstrap 連携サンプル</title> | |
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> | |
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> | |
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> | |
<script src="jquery.validate.bootstrap3.js"></script> | |
</head> | |
<body> | |
<div class="container"> | |
<!-- Bootstrapのフォーム --> | |
<form class="form-horizontal" method="get" action=""> | |
<fieldset> | |
<legend>入力フォーム</legend> | |
<!-- 各項目を form-group で区切る --> | |
<div class="form-group"> | |
<label for="cname" class="control-label col-xs-3">名前 (必須、少なくとも2文字以上)</label> | |
<div class="col-xs-9"> | |
<input id="cname" name="name" type="text" class="form-control" minlength="2" required> | |
</div> | |
</div> | |
<!-- 各項目を form-group で区切る --> | |
<div class="form-group"> | |
<label for="cemail" class="control-label col-xs-3">メールアドレス (必須)</label> | |
<div class="col-xs-9"> | |
<input id="cemail" type="email" name="email" class="form-control" required> | |
</div> | |
</div> | |
<!-- 各項目を form-group で区切る --> | |
<div class="form-group"> | |
<label for="curl" class="control-label col-xs-3">URL (オプション)</label> | |
<div class="col-xs-9"> | |
<input id="curl" type="url" name="url" class="form-control"> | |
</div> | |
</div> | |
<!-- 各項目を form-group で区切る --> | |
<div class="form-group"> | |
<label for="ccomment" class="control-label col-xs-3">コメント (必須)</label> | |
<div class="col-xs-9"> | |
<textarea id="ccomment" name="comment" class="form-control" required></textarea> | |
</div> | |
</div> | |
<div class="btn-group col-xs-9 col-xs-offset-3"> | |
<button class="btn btn-primary" type="submit">送信</button> | |
<button class="btn btn-default" type="reset">クリア</button> | |
</div> | |
</fieldset> | |
</form> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 初期化処理 | |
(function($) { | |
"use strict"; | |
// Validatorの初期値を変更します | |
$.validator.setDefaults({ | |
// NG項目のclass | |
errorClass : 'has-error', | |
// OK項目のclass | |
validClass : 'has-success', | |
// 入力チェックNGの場合、項目のform-groupにerrorClassを設定します | |
highlight : function(element, errorClass, validClass) { | |
$(element).closest('.form-group').addClass(errorClass).removeClass(validClass); | |
}, | |
// 入力チェックOKの場合、項目のform-groupにvalidClassを設定します | |
unhighlight : function(element, errorClass, validClass) { | |
$(element).closest('.form-group').removeClass(errorClass).addClass(validClass); | |
} | |
}); | |
}(jQuery)); | |
// DOM構築後の処理 | |
$(function() { | |
"use strict"; | |
// ページ内のすべてのフォームにValidatorを設定します | |
$('form').each(function(index, element) { | |
var $form = $(element); | |
var validator = $form.validate(); | |
// フォームがresetされたときの処理 | |
$form.bind('reset', function() { | |
// Validatorをリセットします | |
validator.resetForm(); | |
// フォーム内のすべてのform-groupからerrorClassとvalidClassを削除します | |
$form.find('.form-group').each(function(index, element) { | |
$(element).removeClass($.validator.defaults.errorClass).removeClass($.validator.defaults.validClass); | |
}); | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment