I am working on a form, which submits the data to the backend using an Ajax call... for the validation I am using jQuery-ui validation plugin. Here I am facing a problem, where the form is getting submitted even though fields are left behind with out entering the data.
I am breaking my head for the last 4 hours figuring out where I am going wrong.
Below are the files..
Policy.jsp
<c:set var="baseUrl" value="${pageContext.request.contextPath}" />
<link href="<c:url value="/css/fullcalendar.css"/>" rel="stylesheet" />
<link href="<c:url value="/css/datepicker.css"/>" rel="stylesheet" />
<script src="<c:url value="/js/moment.min.js"/>"></script>
<script src="<c:url value="/js/fullcalendar.js"/>"></script>
<script src="<c:url value="/js/bootstrap-datepicker.js"/>"></script>
<script src="<c:url value="/js/smlibray/new-policy.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 class="form-horizontal policy-form" id="policy-form" autocomplete="off">
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label">Select Target Env</label>
<div class="col-sm-7">
<select class="form-control" name="targetEnv"
id="targetEnv">
<option value=""><spring:message
code="newPolicy.selectTagetEnv"></spring:message></option>
<option value="Tal">Tal</option>
<option value="Cert">Cert</option>
<option value="Prod">Prod</option>
</select>
</div>
</div>
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label"><spring:message
code="newPolicy.domainName"></spring:message></label>
<div class="col-sm-7">
<input class="form-control" id="domainName" name="domainName"
type="text" placeholder="domain Name">
</div>
</div>
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label"><spring:message
code="newPolicy.authSchemaType"></spring:message></label>
<div class="col-sm-7">
<select class="form-control" name="authSchemaType"
id="authSchemaType">
<option value=""><spring:message
code="newPolicy.selectAuthSchemaType"></spring:message></option>
<option value="Basic Auth">Basic Auth</option>
<option value="Form Auth">Form Based Auth</option>
</select>
</div>
</div>
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label"><spring:message
code="newPolicy.httpHeadersRequired"></spring:message></label>
<div class="radio col-sm-7">
<label> <input type="radio" value="Yes" class=""
name="headersRequired" id="headersRequired">
<spring:message code="newPolicy.yes"></spring:message>
</label> <label class="m-left-md"><input type="radio" value="No"
class="" name="headersRequired" id="headersRequired">
<spring:message code="newPolicy.no"></spring:message> </label>
</div>
</div>
<div id="headerCheck">
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label ">
</label>
<div class="checkbox col-sm-7">
<label><input type="checkbox" value="racfgroups" class="headers"
name="racfgroups" id="racfgroups">RACF Groups
</label>
</div>
</div>
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label ">
</label>
<div class="checkbox col-sm-7">
<label><input type="checkbox" value="firstName" class="headers"
name="firstName" id="firstName">First Name
</label>
</div>
</div>
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label ">
</label>
<div class="checkbox col-sm-7">
<label><input type="checkbox" value="lastName" class="headers"
name="lastName" id="lastName">Last Name
</label>
</div>
</div>
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label ">
</label>
<div class="checkbox col-sm-7">
<label><input type="checkbox" value="email" class="headers"
name="emailHdr" id="emailHdr">Email
</label>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-5 control-label ">
</label>
<div class="radio col-sm-7">
<label><input type="radio" value="multiple" class=""
name="httpMultiple" id="httpMultiple"><input type="text"
class="headers form-control" disabled="disabled" name="custHeader" id="custHeader">
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label"><spring:message
code="newPolicy.appHaveHostedOnBigIp"></spring:message></label>
<div class="radio col-sm-7">
<label> <input type="radio" value="Yes" class=""
name="bigIp" id="ipYes">
<spring:message code="newPolicy.yes"></spring:message>
</label> <label> <input type="radio" value="No" class=""
name="bigIp" id="ipNo">
<spring:message code="newPolicy.no"></spring:message>
</label>
</div>
</div>
<div class="table-responsive">
<table id="uriInfo" class="table table-bordered table-striped grid-table">
<thead>
<tr>
<th><spring:message code="newPolicy.enterURI"></spring:message></th>
<th><spring:message code="newPolicy.authType"></spring:message></th>
<th><spring:message code="newPolicy.authPermission"></spring:message></th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="uriDiv input-group">
<input type="text" name="uriName" class="common form-control"
id="uriName" placeholder="URL" />
</div></td>
<td><div class="uriDiv input-group">
<select class="common authSelect form-control" name="authType" id="authType">
<option value=""><spring:message
code="newPolicy.selectAuthType"></spring:message></option>
<option value="RACF">RACF</option>
<option value="LDAP">LDAP</option>
</select>
</div></td>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label> <input type="radio" class="common anyuser"
value="anyUser" name="authPermission" id="authPermission">Any
User
</label>
</div>
<div class="uriDiv radio radio-input">
<label> <input type="radio" class="common groupuser"
value="groupUser" name="authPermission" id="authPermission">
<input type="text" name="authPermissionValue" disabled="disabled"
class="common form-control" id="authPermissionValue" placeholder="Enter Multiple Permission , Separate " />
</label>
</div>
</div>
</td>
<td><button type="button"
class="btn btn-primary delete-but-grid">
<span class="glyphicon glyphicon-remove"></span>
</button></td>
</tr>
<tr>
<td colspan="4">
<button type="button" id="addBtn"
class="btn add-but-grid glyphicon glyphicon-plus-sign"></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label"><spring:message
code="newPolicy.executedBy"></spring:message></label>
<div class="col-sm-7">
<div class="input-group date-picker-cus">
<input id="date-picker-2" type="text" name="datePicker"
class="date-picker form-control" /> <label for="date-picker-2"
class="input-group-addon btn"><span
class="glyphicon glyphicon-calendar"></span> </label>
</div>
</div>
</div>
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label"><spring:message
code="newPolicy.applicationSupportOwner"></spring:message></label>
<div class="col-sm-7">
<input class="form-control" id="asOwner" name="asOwner"
type="text">
</div>
</div>
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label"><spring:message
code="newPolicy.deptNum"></spring:message></label>
<div class="col-sm-7">
<input class="form-control" id="deptNum" name="deptNum"
type="text">
</div>
</div>
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label"><spring:message
code="newPolicy.contactEmail"></spring:message></label>
<div class="col-sm-7">
<input class="form-control" id="email" name="email" type="email"
placeholder="Email for communication...">
</div>
</div>
<div class="form-group">
<label for="domainname" class="col-sm-5 control-label"><spring:message
code="newPolicy.businessCaseForChange"></spring:message></label>
<div class="col-sm-7">
<textarea class="form-control" id="businessCase"
name="businessCase"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-7">
<button class="btn btn-primary" id="saveBtn" type="submit">
<spring:message code="submit"></spring:message>
</button>
<button type="reset" class="btn btn-primary" onClick="clearData();">
<spring:message code="cancel"></spring:message>
</button>
</div>
</div>
</form>
</div>
<!--form-fields close -->
</div>
</div>
<script src="/assets/js/validation.js"></script>
policy.js - here i have the ajax call to submit the form
$("#policy-form").submit(function(event) {
event.preventDefault();
var jsonObject=getData();
$.ajax({
type: 'POST',
url: $("#applicationUrl").val() +"/web/utilities/newDomainpolicy",
dataType: 'json',
cache:false,
headers: {
'Content-Type': 'application/json'
},
data:JSON.stringify(jsonObject),
success:function(response)
{
window.location.href=$("#applicationUrl").val()+"/web/utilities/policyDetails?policyId="+response.genericId+"&targetEnv="+response.targetEnv
}
});
return false;
//event.unbind();
});
Validation.js - for validating the form..
$(document).ready(function() {
$.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) {
/*if (element.prop('type') === 'checkbox') {
error.insertAfter(element.parent());
}*/
if (element.is(":radio")) {
error.insertAfter(element.parent());
//error.appendTo( element.parents('.container') );
} else {
error.insertAfter(element);
}
}
});
$("#policy-form").validate({
rules:{
targetEnv:{
required:true
},
domainName: {
required:true
},
authSchemaType: {
required: true
},
headersRequired: {
required: true
},
bigIp:{
required: true
},
uriName:{
required: true
},
authType:{
required: true
},
authPermission:{
required: true
},
asOwner:{
required: true
},
deptNum:{
required: true
},
email:{
required: true,
email: true
},
datePicker:{
required: true
},
businessCase:{
required: true
}
},
messages:{
targetEnv:{
required: 'Please select the target Env for this change request.'
},
email: {
required: 'Please enter an email address.',
email: 'Please enter a <em>valid</em> email address.'
},
datePicker:{
required: 'Please select the Execution date for the policy.'
},
deptNum:{
required: 'Please enter the appropirate Dept.Num for this change request.'
},
asOwner:{
required: 'Please enter the corresponding owner for this request.'
},
authPermission:{
required: 'Please select the Auth Permission for the policy Url.'
},
authType:{
required: 'Please select the Auth Type for the policy Url.'
},
uriName :{
required: 'Please enter the Url.'
},
bigIp:{
required: 'Please select - the app needs to be hosted on BigIp or not.'
},
headersRequired:{
required: 'Please select - to have headers configured for the app or not'
},
authSchemaType:{
required: 'Please select the Auth Schems Type for the app Domain'
},
domainName:{
required: 'Domain name is required.'
}
},
/*submitHandler:function(form){
formSubmit();
}*/
});
/*if($("#policy-form").valid()){
formSubmit();
}*/
});
Appreciate the Help..
