Jquery验证插件提交无效表单

Jquery validation pulgin submitting invalid form

本文关键字:无效 表单 提交 插件 验证 Jquery      更新时间:2023-09-26

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

谢谢…

我修复了这个问题,通过为path-name和html-name属性设置相同的名称,对于spring form标签,path是必选的,而id和name不是必选的…似乎spring表单标签会自动生成与路径字段同名的id和名称..所以用相同的路径名称替换我的html-name解决了这个问题..

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