Jquery validation submitting spring form with errors
Question
I am using jquery form validation with spring forms. The issue is that in some of my forms, even if the form has errors, the submit is happening and I get a nasty server error. While in another form, it works just fine and submit doesn't happen if there are field level errors in the form.
Also, I can see that jquery validation rules are not getting applied to any field. If I specify rule inline with data-rule-* then it looks like it is working. But form is submitting with errors anyways.
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>
FYI, I am including all the scripts in separate jsp(header.jsp) and the form validation is working fine for some jsps while not working for others.
Works for below 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 answers
solution1
0 2019-07-23 06:21:40
I guess things are little different with forms which have multiple steps. Form submission works little but differently for these somehow and validate method is not called normally before the form submission.
Please find the below working code. Reference
$(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();
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery Form Submit Validation Not Submitting
Form Not Submitting after Jquery Validation
jQuery Validation form is not Validating and submitting
Jquery form submitting before validation
Jquery form validation issue when submitting form
jQuery ajax form not submitting when no errors exist
Jquery validation showing message but form submitting
AJAX Jquery Validation not working while submitting the form
Submitting a form with ajax after jQuery validation is successfull
Jquery validation pulgin submitting invalid form
Related Tags