jQuery驗證pulgin提交無效表單

Question

我正在使用jquery驗證插件來驗證我的表單。.我遇到了一個問題，我的表單在提交時變得更加困難，單擊提交按鈕時出現無效字段。.不確定我在哪里做錯了..需要幫助。

jsp文件：

    <%@include file="././Header.jsp"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="baseUrl" value="${pageContext.request.contextPath}" />
<script src="<c:url value="/js/smlibray/emailCommunicate.js"/>"></script>
 <link href="<c:url value="/js/jquery-ui.css"/>" rel="stylesheet" />
<script src="<c:url value="/js/jquery-ui.js"/>"></script>
<script type="text/javascript" src="/siteMinderAppWeb/assets/js/jquery.validate.min.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:form class="form-horizontal policy-form" id="emailCommu-form" name="emailCommu-form" method="POST" modelAttribute="emailForm">
                <div class="form-group">
                <h1 class="email-header">SiteMidner Email Notification</h1>
                <c:choose>
                    <c:when test="${not empty sMsg}">
                        <div class="email-Commu-SMsg">* ${sMsg}</div>
                    </c:when>
                    <c:otherwise>
                        <c:if test="${not empty eMsg}">
                            <div class="email-Commu-EMsg">* ${eMsg}</div>
                        </c:if>
                    </c:otherwise>
                </c:choose>
                <div class="form-emailCommu">
                    <label for="emailSub-txtArea" class="email-ContentHead">Enter
                        the Subject Line for the Email : </label>
                    <div class="email-sm-textDiv">
                        <form:textarea path="emailSubject" name="emailSubTxtArea" id="emailSubTxtArea"
                            placeholder="Email Subject"/>
                    </div>
                </div>

                <div class="form-emailCommu">
                    <label for="emailBod-txtArea" class="email-ContentHead">Enter
                        the Message Body for the Email : </label>
                    <div class="email-sm-textDiv">
                        <form:textarea path="emailMsg" name="emailBodyTxtArea" id="emailBodyTxtArea"
                            placeholder="Email Body"/>
                    </div>
                </div>

                <div class="email-sendButton">
                    <input type="submit" class="styled-button" value="Send Email"></input>
                </div>
                </div>
            </form:form>

        </div>
        <!--form-fields close -->
    </div>
</div>

具有驗證方法的js文件：-

$.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) {
                error.insertAfter(element);
            }
    });
    $("#emailCommu-form").submit(function(e){
           e.preventDefault();
       }).validate({
        rules:{
            emailSubTxtArea:{
                required:true
            },
            emailBodyTxtArea: {
                required:true
            }

        },
        messages:{
            emailSubTxtArea:{
                required: 'Email Subject cannot be empty.'
            },
            emailBodyTxtArea: {
                required: 'Email body msg cannot be empty.',
            }
        },  
        submitHandler:function(form){
            //var jsonObj = getData();      
            if(confirm("You are about to send Email Communication, Click Ok if you want to proceed..?")){
            form.submit();
        }
        }
    });

謝謝...

Answer 1

我通過為path-name和html-name屬性使用相同的名稱來解決了這個問題。通過spring form標簽，path是強制性的，而id和name不是必需的...似乎spring form標簽將自動生成id和名稱與路徑字段具有相同的名稱..因此，將我的html名稱替換為與路徑名稱相同的名稱即可解決此問題。

<form:textarea path="emailSubject" name="emailSubject" id="emailSubTxtArea"
                            placeholder="Email Subject"/>