<!-- jquery.validate/validate.css --> <link rel="stylesheet" type="text/css" href="<{xoAppUrl}>modules/ugm_tools2/class/jquery.validate/validate.css"> <script type="text/javascript" src="<{xoAppUrl}>modules/ugm_tools2/class/jquery.validate/jquery.validate.min.js"></script>
<script type="text/javascript"> $( document ).ready( function () { $( "#myForm" ).validate( { submitHandler: function(form) { //驗證成功之後就會進到這邊: //方法一:直接把表單 POST 或 GET 到你的 Action URL //方法二:讀取某些欄位的資料,ajax 給別的 API。 //此處測試方法一的寫法如下: form.submit(); }, rules: { no: "required", //必填 money: { required: true, //必填 digits:true //必须输入整数 }, }, messages: { no: "優惠現金券號碼為必填", money: { required: "優惠現金券金額為必填", digits: "必须输入整数" }, }, errorElement: "em", errorPlacement: function ( error, element ) { // Add the `help-block` class to the error element error.addClass( "help-block" ); // Add `has-feedback` class to the parent div.form-group // in order to add icons to inputs element.closest( "div.form-group" ).addClass( "has-feedback" ); //因checkbox、radio,外面多一層 label if ( element.prop( "type" ) === "checkbox" || element.prop( "type" ) === "radio") { error.insertAfter( element.parent( "label" ) ); } else { error.insertAfter( element ); } // Add the span element, if doesn't exists, and apply the icon classes to it. if ( !element.next( "span" )[ 0 ] ) { $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element ); } }, success: function ( label, element ) { // Add the span element, if doesn't exists, and apply the icon classes to it. if ( !$( element ).next( "span" )[ 0 ] ) { $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( element ); } }, highlight: function ( element, errorClass, validClass ) { //驗證失敗要做的事 //在父親(div)+ has-error - has-success //在後面(span) + glyphicon-remove - glyphicon-ok $( element ).closest( "div.form-group" ).addClass( "has-error" ).removeClass( "has-success" ); $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" ); }, unhighlight: function ( element, errorClass, validClass ) { //驗證成功要做的事 $( element ).closest( "div.form-group" ).addClass( "has-success" ).removeClass( "has-error" ); $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" ); } }); }); </script>