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

我修复了这个问题，通过为路径名和html-name属性设置相同的名称。使用spring form标签，路径是必需的，而id和name不是必需的...似乎spring form标签将自动生成与路径字段同名的id和名称。用路径名替换我的html-name修复了问题..

Seq.mapi

Jquery验证pulgin提交无效表单

1 个答案: