jquery.validate ajax提交

頁面引入jquery.validate.min.js

<style>  //引入錯誤格式
     label.error {
        display: block;
        margin-left: 1em;
        width: auto;
        color: red;
    }
    </style><script type="text/javascript" src="/library/js/jquery.validate.min.js"></script>

要驗證的form，必須是form表單，提交不提交的無所謂

<form target="hiddenIframe" id="content">
                    <div class="modal-body" style="margin-left:110px;">                
                        <label style="float:left" for="fieldType">①字段類型<span style="color:red">*</span>:</label>
                        <input style="float:left;margin-left:40px;" type="text" name="fieldType" id="fieldType"/>
                        <br>
                        <br>
                        <label style="float:left" for="intro">②字段名稱<span style="color:red">*</span>:</label>
                        <input style="float:left;margin-left:39px;" type="text" name="fieldName" id="fieldName"/>
                        <br/>
                        <br/>
                        <label style="float:left" for="orderNumber">③排序（數字）：</label>
                        <input style="float:left;margin-left:6px;" type="text" name="orderNumber" id="orderNumber"/>
                        <br/>
                        <br/>
                        <label style="float:left" for="isDisable">④使用情況：</label>
                        <input type="radio" name="isDisable" value="0"/>禁用
                        <input type="radio" name="isDisable" value="1" checked/>啟用
                        <br/>
                        <br/>
                        <label style="float:left" for="remark">⑤備注：</label><br>
                        <textarea rows="6" cols="40" name="remark" id="remark"></textarea>
                        <br>
                        <br>
                        <div class="error">error:</div>              //--------錯誤顯示地方
                    </div>
                    <div class="modal-footer">
                        <input id="insertField" type="button" style="margin-left: 150px;margin-top: 20px;" value="新增數據字典" class="btn btn-primary"></a>
                        <input type="button" style="margin-left: 150px;margin-top: 20px;" value="取消" class="btn btn-primary" data-dismiss="modal" onclick="javascript:window.location.reload();"></a>
                        <iframe name="hiddenIframe" id="hiddenIframe" style="display:none"></iframe>    
                    </div>
                </form> 

 

js中如下：

//驗證方法
function valContent(){
    return $("#content").validate({
        errorLabelContainer: $("#content div.error"),
        rules: { 
                fieldName: { //fieldName 是頁面的name屬性
                    required: true 
                }, 
                orderNumber:{
                    number: true,
                    digits: true,
                    min :0
                }
            }, 
        messages: { 
            fieldName: { 
                required: "請填寫字段名稱"
            }, 
            orderNumber:{
                number: "請輸入合法的排序數字",
                digits: "排序只能輸入整數",
                min :$.validator.format("不能小於0")
            }
        }
    }).form();
}

 

發送的ajax請求如下：

//新增數據字典
    $("#insertField").click(function(){
        var fieldType = $("#fieldType").val();
        var fieldName = $("#fieldName").val();
        var orderNumber = $("#orderNumber").val();
        var isDisable = $("input[type='radio']:checked").val();
        var remark = $("#remark").val();

        if(valContent()){
            $.post(ctx+"/field/insert",{fieldType:fieldType,fieldName:fieldName,orderNumber:orderNumber,isDisable:isDisable,remark:remark},function(msg){
                if(msg.success){
                    $("#myModal").modal('toggle');
                    loadSignIn();
                }
            });
        }
    });