表單驗證使用jquery.validate

設定錯誤訊息出現位置及樣式

label.error {

        color: red;

        position: absolute;

        background-color: white;

        padding: 0.25em;

        border: 1px solid #adff2f;

}

$('#form1').validate({

errorPlacement: function (error, element) {

            $(element).parent().append(error);

            $(error).css({ top: $(element).position().top, left: $(element).position().left + $(element).width()+10 })

          },

});

自訂錯誤訊息

<input name="id" minlength="4" data-msg-minlength="長度必須大於4">

自訂驗證規則

$.validator.addMethod("fixlength", function (value, element,param) {
             return !value || value.length == param;

        }, jQuery.validator.format("長度必須為{0}"));

 $("#form").validate();
<input data-rule-fixlength='4' type="text">

依據條件驗證

$('#form1').validate({

            rules: {

                Mailbox: {

                    required: '#sendmail:checked',

                    email: '#sendmail:checked'

                },

            }

        });

 <input type="checkbox" id="sendmail"  />Email：<input type="text" name="Mailbox" id="Mailbox" />