jQuery-ui验证提交无效表单

时间:2016-06-15 23:01:07

标签: jquery ajax jquery-validate

我正在处理一个表单,它使用Ajax调用将数据提交到后端...用于验证我正在使用jQuery-ui验证插件。在这里,我遇到了一个问题,即使字段被遗忘而没有输入数据,表单也会被提交。

我在过去的4个小时里一直在弄清楚我哪里出错了。

以下是文件..

Policy.jsp

<c:set var="baseUrl" value="${pageContext.request.contextPath}" />
<link href="<c:url value="/css/fullcalendar.css"/>" rel="stylesheet" />
<link href="<c:url value="/css/datepicker.css"/>" rel="stylesheet" />
<script src="<c:url value="/js/moment.min.js"/>"></script>
<script src="<c:url value="/js/fullcalendar.js"/>"></script>
<script src="<c:url value="/js/bootstrap-datepicker.js"/>"></script>
<script src="<c:url value="/js/smlibray/new-policy.js"/>"></script>
<input type="hidden" name="applicationUrl" id="applicationUrl"
    value="${pageContext.request.contextPath}">

<div class="container sec-container middle-sec">
    <div class="form-fields row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <form class="form-horizontal policy-form" id="policy-form" autocomplete="off">
            <div class="form-group">
                    <label for="domainname" class="col-sm-5 control-label">Select Target Env</label>
                    <div class="col-sm-7">
                        <select class="form-control" name="targetEnv"
                            id="targetEnv">
                            <option value=""><spring:message
                                    code="newPolicy.selectTagetEnv"></spring:message></option>
                            <option value="Tal">Tal</option>
                            <option value="Cert">Cert</option>
                            <option value="Prod">Prod</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label for="domainname" class="col-sm-5 control-label"><spring:message
                            code="newPolicy.domainName"></spring:message></label>
                    <div class="col-sm-7">
                        <input class="form-control" id="domainName" name="domainName"
                            type="text" placeholder="domain Name">
                    </div>
                </div>
                <div class="form-group">
                    <label for="domainname" class="col-sm-5 control-label"><spring:message
                            code="newPolicy.authSchemaType"></spring:message></label>
                    <div class="col-sm-7">
                        <select class="form-control" name="authSchemaType"
                            id="authSchemaType">
                            <option value=""><spring:message
                                    code="newPolicy.selectAuthSchemaType"></spring:message></option>
                            <option value="Basic Auth">Basic Auth</option>
                            <option value="Form Auth">Form Based Auth</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="domainname" class="col-sm-5 control-label"><spring:message
                            code="newPolicy.httpHeadersRequired"></spring:message></label>
                    <div class="radio col-sm-7">
                        <label> <input type="radio" value="Yes" class=""
                            name="headersRequired" id="headersRequired">
                        <spring:message code="newPolicy.yes"></spring:message>
                        </label> <label class="m-left-md"><input type="radio" value="No"
                            class="" name="headersRequired" id="headersRequired">
                        <spring:message code="newPolicy.no"></spring:message> </label>
                    </div>
                </div>

                <div id="headerCheck">
                        <div class="form-group">
                            <label for="domainname" class="col-sm-5 control-label ">
                            </label>
                            <div class="checkbox col-sm-7">
                                <label><input type="checkbox" value="racfgroups" class="headers"
                                    name="racfgroups" id="racfgroups">RACF Groups
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                         <label for="domainname" class="col-sm-5 control-label ">
                            </label>
                            <div class="checkbox col-sm-7">
                                <label><input type="checkbox" value="firstName" class="headers"
                                    name="firstName" id="firstName">First Name
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                         <label for="domainname" class="col-sm-5 control-label ">
                            </label>
                            <div class="checkbox col-sm-7">
                                <label><input type="checkbox" value="lastName" class="headers"
                                    name="lastName" id="lastName">Last Name
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                         <label for="domainname" class="col-sm-5 control-label ">
                            </label>
                            <div class="checkbox col-sm-7">
                                <label><input type="checkbox" value="email" class="headers"
                                    name="emailHdr" id="emailHdr">Email
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-5 control-label ">
                            </label>
                           <div class="radio col-sm-7">
                                <label><input type="radio" value="multiple" class=""
                                    name="httpMultiple" id="httpMultiple"><input type="text"
                                     class="headers form-control" disabled="disabled" name="custHeader" id="custHeader">
                                </label>
                            </div>
                        </div>
                        </div>




                <div class="form-group">
                    <label for="domainname" class="col-sm-5 control-label"><spring:message
                            code="newPolicy.appHaveHostedOnBigIp"></spring:message></label>
                    <div class="radio col-sm-7">
                        <label> <input type="radio" value="Yes" class=""
                            name="bigIp" id="ipYes">
                        <spring:message code="newPolicy.yes"></spring:message>
                        </label> <label> <input type="radio" value="No" class=""
                            name="bigIp" id="ipNo">
                        <spring:message code="newPolicy.no"></spring:message>
                        </label>
                    </div>
                </div>
                <div class="table-responsive">
                    <table id="uriInfo" class="table table-bordered table-striped grid-table">
                        <thead>
                            <tr>
                                <th><spring:message code="newPolicy.enterURI"></spring:message></th>
                                <th><spring:message code="newPolicy.authType"></spring:message></th>
                                <th><spring:message code="newPolicy.authPermission"></spring:message></th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><div class="uriDiv input-group">
                                        <input type="text" name="uriName" class="common form-control"
                                            id="uriName" placeholder="URL" />
                                    </div></td>
                                <td><div class="uriDiv input-group">
                                        <select class="common authSelect form-control" name="authType" id="authType">
                                            <option value=""><spring:message
                                                    code="newPolicy.selectAuthType"></spring:message></option>
                                            <option value="RACF">RACF</option>
                                            <option value="LDAP">LDAP</option>
                                        </select>
                                    </div></td>
                                <td>
                                    <div class="auth-permission-rd">
                                        <div class="uriDiv radio radio-left">
                                            <label> <input type="radio" class="common anyuser"
                                                value="anyUser" name="authPermission" id="authPermission">Any
                                                User
                                            </label>
                                        </div>
                                        <div class="uriDiv radio radio-input">
                                            <label> <input type="radio" class="common groupuser"
                                                value="groupUser" name="authPermission" id="authPermission">
                                                <input type="text" name="authPermissionValue" disabled="disabled"
                                                class="common form-control" id="authPermissionValue" placeholder="Enter Multiple Permission , Separate " />
                                            </label>
                                        </div>
                                    </div>
                                </td>
                                <td><button type="button"
                                        class="btn btn-primary delete-but-grid">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </button></td>
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <button type="button" id="addBtn"
                                        class="btn add-but-grid glyphicon glyphicon-plus-sign"></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="form-group">
                    <label for="domainname" class="col-sm-5 control-label"><spring:message
                            code="newPolicy.executedBy"></spring:message></label>
                    <div class="col-sm-7">
                        <div class="input-group date-picker-cus">
                            <input id="date-picker-2" type="text" name="datePicker"
                                class="date-picker form-control" /> <label for="date-picker-2"
                                class="input-group-addon btn"><span
                                class="glyphicon glyphicon-calendar"></span> </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="domainname" class="col-sm-5 control-label"><spring:message
                            code="newPolicy.applicationSupportOwner"></spring:message></label>
                    <div class="col-sm-7">
                        <input class="form-control" id="asOwner" name="asOwner"
                            type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label for="domainname" class="col-sm-5 control-label"><spring:message
                            code="newPolicy.deptNum"></spring:message></label>
                    <div class="col-sm-7">
                        <input class="form-control" id="deptNum" name="deptNum"
                            type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label for="domainname" class="col-sm-5 control-label"><spring:message
                            code="newPolicy.contactEmail"></spring:message></label>
                    <div class="col-sm-7">
                        <input class="form-control" id="email" name="email" type="email"
                            placeholder="Email for communication...">
                    </div>
                </div>
                <div class="form-group">
                    <label for="domainname" class="col-sm-5 control-label"><spring:message
                            code="newPolicy.businessCaseForChange"></spring:message></label>
                    <div class="col-sm-7">
                        <textarea class="form-control" id="businessCase"
                            name="businessCase"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-5 col-sm-7">
                        <button class="btn btn-primary" id="saveBtn" type="submit">
                            <spring:message code="submit"></spring:message>
                        </button>

                        <button type="reset" class="btn btn-primary" onClick="clearData();">
                            <spring:message code="cancel"></spring:message>
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!--form-fields close -->
    </div>
</div>
 <script src="/assets/js/validation.js"></script>

policy.js - 这里我有ajax调用提交表单

 $("#policy-form").submit(function(event) {
        event.preventDefault();
    var jsonObject=getData();
    $.ajax({
        type: 'POST',
        url:  $("#applicationUrl").val() +"/web/utilities/newDomainpolicy",
        dataType: 'json',
        cache:false,
        headers: { 
            'Content-Type': 'application/json' 
            },
        data:JSON.stringify(jsonObject), 
        success:function(response)
        {
            window.location.href=$("#applicationUrl").val()+"/web/utilities/policyDetails?policyId="+response.genericId+"&targetEnv="+response.targetEnv
        }
   });
    return false;
    //event.unbind();
    });

Validation.js - 用于验证表单..

$(document).ready(function() {
    $.validator.setDefaults({
        errorClass: 'help-block',
        highlight: function(element) {
          $(element)
            .closest('.form-group')
            .addClass('has-error');
        },
        unhighlight: function(element) {
          $(element)
            .closest('.form-group')
            .removeClass('has-error');
        },
            errorPlacement : function(error, element) {
            /*if (element.prop('type') === 'checkbox') {
                error.insertAfter(element.parent());
            }*/
            if (element.is(":radio")) {
                error.insertAfter(element.parent());
                //error.appendTo( element.parents('.container') );
            } else {
                error.insertAfter(element);
            }
        }
    });
    $("#policy-form").validate({
        rules:{
            targetEnv:{
                required:true
            },
            domainName: {
                required:true
            },
            authSchemaType: {
                required: true
            },
            headersRequired: {
                required: true
            },
            bigIp:{
                required: true
            },
            uriName:{
                required: true
            },
            authType:{
                required: true
            },
            authPermission:{
                required: true
            },
            asOwner:{
                required: true
            },
            deptNum:{
                required: true
            },
            email:{
                required: true,
                email: true
            },
            datePicker:{
                required: true
            },
            businessCase:{
                required: true
            }   
        },
        messages:{
            targetEnv:{
                required: 'Please select the target Env for this change request.'
            },
            email: {
                required: 'Please enter an email address.',
                email: 'Please enter a <em>valid</em> email address.'
            },
            datePicker:{
                required: 'Please select the Execution date for the policy.'
            },
            deptNum:{
                required: 'Please enter the appropirate Dept.Num for this change request.'
            },
            asOwner:{
                required: 'Please enter the corresponding owner for this request.'
            },
            authPermission:{
                required: 'Please select the Auth Permission for the policy Url.'
            },
            authType:{
                required: 'Please select the Auth Type for the policy Url.'
            },
            uriName :{
                required: 'Please enter the Url.'
            },
            bigIp:{
                required: 'Please select - the app needs to be hosted on BigIp or not.'
            },
            headersRequired:{
                required: 'Please select - to have headers configured for the app or not'
            },
            authSchemaType:{
                required: 'Please select the Auth Schems Type for the app Domain'
            },
            domainName:{
                required: 'Domain name is required.'
            }
        },

        /*submitHandler:function(form){
            formSubmit();   
        }*/

    });
    /*if($("#policy-form").valid()){
        formSubmit();
    }*/
});  

感谢帮助..

1 个答案:

答案 0 :(得分:1)

  

我正在使用jQuery-ui验证插件

没有这样的事情。根据您的代码,您使用的是the jQuery Validate plugin,它与jQuery UI无关。

  

我在过去的4个小时里弄清楚我的错误在哪里

您的自定义.submit()处理程序完全绕过验证插件:

$("#policy-form").submit(function(event) { ....

使用此插件时,应该创建submit处理程序,因为插件已经在处理此事件。

您应该只使用开发人员提供的submitHandler回调。此submitHandler函数仅在表单有效时触发,并且按照the documentation “在经过验证后通过Ajax提交表单的正确位置”

$("#policy-form").validate({
    rules:{
        ....
    },
    messages:{
        ....
    },
    submitHandler: function(form) {
        // YOUR AJAX ONLY GOES HERE!
        return false;  
    }
});