Jquery验证插件提交无效表单答案

【问题标题】：Jquery validation pulgin submitting invalid formJquery验证插件提交无效表单
【发布时间】：2016-10-28 05:40:43
【问题描述】：

我正在使用 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();
        }
        }
    });

谢谢...

【问题讨论】：

需要检查的两个重要事项...运行此代码时是否存在表单，浏览器控制台中是否有任何错误会阻止此代码
看不到你在页面的什么地方包含了你自己的代码或者包含了 jQuery.js
hI Charlietfl，我在控制台中没有看到任何错误，并且表单显示正常，并且在提交时使用无效字段提交..您是否在我的代码中看到任何错误..？
看起来很好并且在代码运行时存在但不是一回事。您的代码是否在 document.ready 处理程序中？我假设它包含在页面中但未显示在页面大纲中？
显然是 Charlietfl ..以前我使用 ajax 进行提交，然后它工作正常..但现在我进行了更改并通过表单处理程序提交完成了它..确实使用
使有什么不同..？

标签： javascript jquery forms validation jquery-ui

【解决方案1】：

我解决了这个问题，通过为路径名和 html-name 属性设置相同的名称。使用 spring 表单标签，路径是强制性的，而 id 和 name 不是强制性的...似乎 spring 表单标签会自动生成id 和 name 与 path 字段同名..所以用与 path-name 相同的替换我的 html-name 解决了问题..

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

【讨论】：