Form Validation

http://jqueryvalidation.org/

$(document).ready(function(){
	jQuery.validator.setDefaults({
	  debug: true,
	  success: "valid"
	});

	var $form = $('#campaign_form');
	$form.validate({
		ignore: []
	});
	console.log($form.valid());

	$('#md_campaign').modal();
});

Don’t show error messages, just highlight the fileds:

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/localization/messages_zh_TW.min.js"></script>


<!-- Required, must be digits -->
<input type="text" class="form-control short_input" name="space" title="坪數" data-rule-digits="true" data-msg-digits="只能輸入數字">

<!-- Not required, must be digits -->
<input type="text" class="form-control" name="age[]" placeholder="人" title="人數" data-rule-digits="true" data-msg-digits="只能輸入數字">


<!-- Required, minlength, custom regular express ->
<input type="text" class="form-control mid_input float-right" name="phone" 
title="聯絡電話" 
data-rule-required="true" 
data-rule-minlength="8" 
data-msg-minlength="至少輸入8位數"
data-rule-pattern="[0-9\+\-]{8,}"
data-msg-pattern="只能輸入數字,+或-"
>

<!-- Radio and checkbox -->
<input type="radio" name="gender" id="radio" value="m" required="true">男
<input type="radio" name="gender" id="radio2" value="f" required="true">女
<label for="gender" class="error"></label>

Javascript

	var $form = $('#contact_form');

	jQuery.validator.setDefaults({
	  debug: true,
	  success: "valid"
	});

	$form.validate({
		ignore: [], 
		invalidHandler: function(event, validator) {
			console.log(validator.errorList);
			var list = validator.errorList;
			var err = '';
			var sep = '';
			for(var i = 0; i < list.length; i++){
				var obj = list[i];
				var $e = $(obj.element);
				//console.log(obj);

				if(obj.method == 'required'){
					err += sep + obj.message + " 為必填欄位";
				}else{
					err += sep + $e.attr('title') + obj.message;
				}
				sep = '\n';
			}
			alert(err);
		}, 
		//Avoid default appended text
		errorPlacement: function(error,element) {
                  //console.log($error[0]);
                  //console.log($element[0]);
                  //$error.html('<br/>' + $error.html());
                  $error.insertAfter($element);
                  //$error.before('<br/>');
		}, 
		rules: {
			name: {
				required: true, 
				pattern: /^[^0-9]+$/
			}, 
			email: {
				required: true, 
				email: true
			}
		}, 
		messages: {
			name: {
				pattern: "不可輸入數字"
			}, 
			email: {
				email: "格式不正確"
			}
		}
	});

	$('#md_contact .bt_submit').on('click', function(e){
		e.preventDefault();
		if($form.valid() == true){
			console.log('valid');
			//send_request();
		}
	});

Usage of errorPlacement:

//Error message will display in where ".error-container" is
  $form.validate({
    submitHandler: function(form) {
      form.submit();
    }, 
    errorPlacement: function(error, element) {
    	var $wrap = $('.form-group').has(element);
    	if($wrap.find(".error-container").size() > 0){
    		error.appendTo( $wrap.find(".error-container") );
    	}else{
    		console.log(error);
    		element.after(error);
    	}
	}
  });
//<div class="error-container"></div>

 

 

Note: