<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();
      }
  });
});