jquery validate 定制 错误提示的显示区域 (validation)

refer to :  http://stackoverflow.com/questions/26498899/jquery-validate-custom-error-message-location

html:   (注意最后面的 span id =gender_error 和前面 radio 的 data-error属性 )

特别注意:  data-error = "#gender_error" , 注意 这个 # 号! 

<span style="color: #FF6B72;">*</span><p style="color: #474747; display: inline;">性别：</p>
<input id="male" data-error="#gender_error" type="radio" value="male" name="instructor_application[gender]" />
<label style="color: #474747" for="male">男</label>
<input id="female" style="margin-left: 50px;" data-error="#gender_error" type="radio" value="female" name="instructor_application[gender]" />
<label style="color: #474747" for="female">女</label>
<span id='gender_error'></span>

js: (建议出现在html下方)

/* 表单校验 */
$("form").validate({
  rules:{
    "instructor_application[name]":"required",
    "instructor_application[gender]": "required",
    // .....
  },

  // 这个函数很重要,就是确定把出错提示显示在哪里的.  
  errorPlacement: function(error, element) {
    var placement = $(element).data('error');  // 获取当前被校验元素的 data-error 属性
    if (placement) {
      $(placement).append(error)
    } else {
      error.insertAfter(element);   // 否则就按照默认的地方来显示
    }
  }
});

就可以了.