jQuery驗證提交帶有錯誤的Spring表單
[英]Jquery validation submitting spring form with errors
問題描述
我正在對Spring表單使用jquery表單驗證。 問題是，在我的某些表單中，即使表單有錯誤，提交仍在發生，並且我收到了討厭的服務器錯誤。 在另一種形式中，它工作得很好，並且如果表單中存在字段級錯誤，則不會提交。
另外，我可以看到jquery驗證規則沒有應用於任何字段。 如果我用data-rule-*指定內聯data-rule-*則看起來它正在運行。 但是表單仍然提交錯誤。
JSP
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="header.jsp"></jsp:include>
<jsp:include page="sidebar.jsp"></jsp:include>
<jsp:include page="topnav.jsp"></jsp:include>
<div class="app-content content">
<div class="content-wrapper">
<div class="content-body">
<section id="number-tabs">
<div class="row match-height">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title text-center">
<spring:message code="adddriver"></spring:message>
</h4>
<a class="heading-elements-toggle"><i
class="fa fa-ellipsis-v font-medium-3"></i></a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
<li><a data-action="close"><i class="ft-x"></i></a></li>
</ul>
</div>
</div>
<div class="card-content collapse show">
<div class="card-body">
<c:url var="adddriver" value="/driver/save" />
<form:form action="${adddriver}" id="adddriver"
modelAttribute="driverForm"
cssClass="number-tab-steps wizard-circle form form-horizontal"
enctype="multipart/form-data">
<h6>Profile</h6>
<fieldset>
<div class="form-body">
<div class="form-group row">
<form:label path="driverProfileDTO.firstname"
cssClass="col-md-3 label-control">
<spring:message code="driver.firstname"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input path="driverProfileDTO.firstname"
id="firstname" maxlength="15" placeholder="FirstName"
cssClass="form-control required" />
</div>
</div>
<div class="form-group row">
<form:label path="driverProfileDTO.middlename"
cssClass="col-md-3 label-control">
<spring:message code="driver.middlename"></spring:message>
</form:label>
<div class="col-md-9">
<form:input path="driverProfileDTO.middlename"
id="middlename" maxlength="15" placeholder="MiddleName"
cssClass="form-control" />
</div>
</div>
<div class="form-group row">
<form:label path="driverProfileDTO.lastname"
cssClass="col-md-3 label-control">
<spring:message code="driver.lastname"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input path="driverProfileDTO.lastname" id="lastname"
maxlength="15" placeholder="LastName"
cssClass="form-control required" />
</div>
</div>
<div class="form-group row">
<form:label path="driverProfileDTO.mobile"
cssClass="col-md-3 label-control">
<spring:message code="driver.mobile"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input data-rule-number="true" path="driverProfileDTO.mobile" id="mobile"
maxlength="10" placeholder="Mobile No"
cssClass="form-control required" />
</div>
</div>
<div class="form-group row">
<form:label path="driverProfileDTO.username"
cssClass="col-md-3 label-control">
<spring:message code="driver.username"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input path="driverProfileDTO.username" id="username"
maxlength="15" placeholder="Username"
cssClass="form-control required" />
</div>
</div>
<div class="form-group row">
<form:label path="driverProfileDTO.password"
cssClass="col-md-3 label-control">
<spring:message code="driver.password"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input path="driverProfileDTO.password"
type="password" id="password" maxlength="15"
placeholder="Password" cssClass="form-control required" />
</div>
</div>
<div class="form-group row">
<form:label path="driverProfileDTO.emailid"
cssClass="col-md-3 label-control">
<spring:message code="driver.emailid"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input date-rule-required="true" data-rule-emailExt="true" path="driverProfileDTO.emailid" id="emailid"
maxlength="30" placeholder="EmailId"
cssClass="form-control" />
</div>
</div>
<div class="form-group row">
<form:label path="driverProfileDTO.driverImage"
cssClass="col-md-3 label-control">
<spring:message code="driver.image"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input path="driverProfileDTO.driverImage"
type="file" cssClass="form-control" />
</div>
</div>
</div>
</fieldset>
</form:form>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- ############ Main END-->
</div>
<jsp:include page="footer.jsp"></jsp:include>
<script>
$(function() {
$(".number-tab-steps").steps({
headerTag : "h6",
bodyTag : "fieldset",
transitionEffect : "fade",
titleTemplate : '<span class="step">#index#</span> #title#',
labels : {
finish : 'Submit'
},
onFinished : function(event, currentIndex) {
document.forms["adddriver"].submit();
}
});
});
$(document).ready(function() {
jQuery.validator.addMethod("emailExt", function(value, element, param) {
return value.match(/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/igm);
},'Invalid email id'); // this works after I use this inline with data-rule*
$("#adddriver").validate({
rules : { // These rules are either not getting applied
"driverProfileDTO.firstname" : {// Tried this but also, but no luck
required : true
},
middlename : {
required : true
},
lastname : {
required : true
},
mobile : {
required : true
},
username : {
required : true
},
password : {
required : true
}
}
});
});
</script>
僅供參考，我將所有腳本都包含在單獨的jsp（header.jsp）中，並且表單驗證對於某些jsps正常，而對其他jsp則無效。
適用於以下jsp
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="header.jsp"></jsp:include>
<jsp:include page="sidebar.jsp"></jsp:include>
<jsp:include page="topnav.jsp"></jsp:include>
<div class="app-content content">
<div class="content-wrapper">
<div class="content-body">
<div class="row match-height">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title text-center">Add Rider</h4>
<a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
<li><a data-action="close"><i class="ft-x"></i></a></li>
</ul>
</div>
</div>
<div class="card-content collapse show">
<div class="card-body">
<c:url var="addrider" value="/rider/save" />
<form:form action="${addrider}" id="addrider" modelAttribute="riderForm" enctype="multipart/form-data" cssClass="form form-horizontal">
<div class="form-body">
<div class="form-group row">
<form:label path="firstname" cssClass="col-md-3 label-control">
<spring:message code="rider.firstname"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input path="firstname" id="firstname" maxlength="15" placeholder="FirstName" cssClass="form-control" required="true" />
</div>
</div>
<div class="form-group row">
<form:label path="middlename" cssClass="col-md-3 label-control">
<spring:message code="rider.middlename"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input path="middlename" id="middlename" maxlength="15" placeholder="MiddleName" cssClass="form-control" />
</div>
</div>
<div class="form-group row">
<form:label path="lastname" cssClass="col-md-3 label-control">
<spring:message code="rider.lastname"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input path="lastname" id="lastname" maxlength="15" placeholder="LastName" cssClass="form-control" required="true" />
</div>
</div>
<div class="form-group row">
<form:label path="username" cssClass="col-md-3 label-control">
<spring:message code="rider.username"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input path="username" id="lastname" maxlength="15" placeholder="User Name" cssClass="form-control" required="true" />
</div>
</div>
<div class="form-group row">
<form:label path="password" cssClass="col-md-3 label-control">
<spring:message code="rider.password"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input path="password" type="password" id="password" maxlength="15" placeholder="Password" cssClass="form-control" required="true" />
</div>
</div>
<div class="form-group row">
<form:label path="email" cssClass="col-md-3 label-control">
<spring:message code="rider.email"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input path="email" id="email" placeholder="Email ID" maxlength="30" cssClass="form-control" required="true" />
</div>
</div>
<div class="form-group row">
<form:label path="mobile" cssClass="col-md-3 label-control">
<spring:message code="rider.mobile"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input path="mobile" id="mobile" placeholder="Mobile No" maxlength="10" cssClass="form-control" required="true" />
</div>
</div>
<div class="form-group row">
<form:label path="imageFile" cssClass="col-md-3 label-control">
<spring:message code="rider.image"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<form:input path="imageFile" id="imageFile" type="file" cssClass="form-control" />
</div>
</div>
<div class="form-group row">
<form:label path="" cssClass="col-md-3 label-control">
<spring:message code="rider.imagepreview"></spring:message>
<span class="danger">*</span>
</form:label>
<div class="col-md-9">
<img id="img" alt="profile" style="width: 150px; border-radius: 50%;">
</div>
</div>
<div class="form-group row">
<form:label path="language" cssClass="col-md-3 label-control">
<spring:message code="rider.language"></spring:message>
</form:label>
<div class="col-md-9">
<form:select path="language" cssClass="form-control">
<form:options items="${riderForm.localeChoices}" />
</form:select>
</div>
</div>
</div>
<div class="form-actions center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form:form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ############ Main END-->
</div>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageFile").change(function() {
readURL(this);
});
$(document).ready(function() {
$("#addrider").validate({
rules: {
firstname: {
required: true
},
middlename: {
required: true
},
lastname: {
required: true
},
password: {
required: true
},
mobile: {
required: true,
digits:true
},
imageFile: {
required: true
},
}
});
});
</script>
<jsp:include page="footer.jsp"></jsp:include>
1 個解決方案
解決方案1
0 2019-07-23 06:21:40
我認為對於具有多個步驟的表單，情況幾乎沒有什么不同。 表單提交的工作原理很少，但因這些原因有所不同，並且在提交表單之前通常不會調用validate方法。
請找到以下工作代碼。 參考
$(function() {
$(".number-tab-steps").steps({
headerTag : "h6",
bodyTag : "fieldset",
transitionEffect : "fade",
titleTemplate : '<span class="step">#index#</span> #title#',
labels : {
finish : 'Submit'
},
onStepChanging: function (event, currentIndex, newIndex)
{
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex)
{
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished : function(event, currentIndex) {
document.forms["adddriver"].submit();
}
});
});
jQuery表單提交驗證未提交
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.