<form id="form" method="post" action="">
  <div>
    <label for="fname">姓名:</label>
    <input type="text" id="fname" name="fname"></input>
  </div>
  <div>
    <label for="phone">電話:</label>
    <input type="text" id="phone" name="phone"></input>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"></input>
  </div>
<div>
    <label for="url">網址:</label>
    <input type="url" id="url" name="url"></input>
  </div>

  <div>
    <input type="submit" value="送出" />
  </div>
</form>

form label {
  display: inline-block;
  width: 100px;
}

form div {
  margin-bottom: 10px;
}

.error {
  color: red;
  margin-left: 5px;
}

label.error {
  display: inline;
}

$(function(){
		$('#form').validate({
       onkeyup: function(element, event) {
         //去除左側空白
         var value = this.elementValue(element).replace(/^\s+/g, "");
         $(element).val(value);
     	},
	    rules: {
	    	/*
				required:必填
				noSpace:空白
				minlength:最小長度
				maxlength:最大長度
				email:信箱格式
				number:數字格式
				url:網址格式https://www.minwt.com
	    	*/
	      fname: {
	        required: true,
	        noSpace: true
	      },
	      phone:{
	      	required: true,
	      	minlength: 8,
					number: true
	      },
	      address: 'required',
	      url:{
	        url: true
	      },
	      email: {
	        required: true,
	        email: true
	      }
	    },
	    messages: {
	      fname: {
	      	required:'必填',
	      	noSpace: '不可有空白'
	      },
	      phone: {
	      	required:'必填',
	      	minlength:'不得少於8位',
	      	number:'電話需為數字'
	      },
	      address: '必填',
	      email: {
	      	required: '必填',
	      	email: 'Email格式不正確'
	      },
	      url: '網址格式不正確'
	    },
	    submitHandler: function(form) {
	      form.submit();
	    }
  });
});