jQuery Validation 簡単にフォームをチェック バリデーション

寄稿しました(ㆁᴗㆁ✿)

読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type='text/javascript' src="/js/jquery.validate.min.js"></script>
 
<script type='text/javascript' src="/js/jquery.validate.handler.js"></script>

主なバリデーション項目 rulesオプション

• required : true or false
  必須項目
• email : true or false
  Emailのフォーマットになっているかチェック
• equalTo : “要素名”
  要素の値と一致しているか
• number : true or false
  整数型かどうか
• birth : true or false
  日付を検証
• minlength : 数字
  最小文字数を指定
• maxlength : 数字
  最大文字数を指定
• rangelength: [最小数, 最大数]
  最少数～最大数の間の文字数かを検証

jquery.validate.handler.js

jQuery(function($){
	$(".form-horizontal").validate({
		  rules : {
				 last_name: {
					required: true
				 },
				 first_name: {
					required: true
				 },
				 email: {
					 required: true,
					 email: true
				 },
				 reemail: {
					 required: true,
					 email: true,
					 equalTo: "#email"
				 },	
				 tel: {
					 number: true
				 },	
				 zip: {
					 number: true
				 },
				 content: {
					 maxlength : 1000
				 },	
				 "CheckboxGroup1[]": {
					 required: true
				 }	
		  },
		  messages: {
				 last_name:{
						required: "必須項目です。入力をお願いします。"
				 },
				 first_name:{
						required: "必須項目です。入力をお願いします。"
				 },
				 email:{
						required: "必須項目です。入力をお願いします。",
						email: "Eメールの形式で入力して下さい。"
				 },
				 reemail:{
						required: "必須項目です。入力をお願いします。",
						email: "Eメールの形式で入力して下さい。",
						equalTo: "入力した値が一致しません。"
 
				 },
				 tel:{
						number: "数字のみ入力出来ます。"
				 },
				 zip:{
						number: "数字のみ入力出来ます。"
				 },
				 content: {
					 maxlength : "最大文字数1000を超えています。文章を短くして下さい。"
				 },	
				 "CheckboxGroup1[]" :{
						required: "必須項目です。選択して下さい。"
				 }
		  },
		  errorPlacement: function(error, element) {
						if(element.attr("name")=="CheckboxGroup1[]")
						{
							error.insertAfter("#CheckboxGroup1_error");	
						}
						else{
							error.insertAfter(element);	
						}
			  
		  }
	});
});

エラーメッセーの色を変更

<style type="text/css">
form.cmxform label.error, label.error {
    color: red;
}