Please Could any one tell me what is the problem that on click of form input validation just showing Error message but not highlighting the border of input box in red color.
<aui:form name="fm" action="<%=portletURL.toString()%>" method="get">
<div class="container-fluid">
<div class="col-md-8 col-md-offset-2 center">
<aui:input name="idService"
value="<%=dto != null ? dto.getIdService() : 0%>" type="hidden" />
<div class="form-group row">
<div class="col-md-3">
<label for="inputOwner" class="col-form-label">Enter
Service Name</label>
</div>
<div class="col-md-9">
<aui:input name="service_name" id="service_name" cssClass="form-control" label=""
value='<%=dto != null ? dto.getName(): ""%>'>
<%-- <aui:validator name="required"
errorMessage='<%=LanguageUtil.get(pageContext , "service.error.msg.field.name")%>' /> --%>
</aui:input>
</div>
</div>
<div class="form-group row">
<div class="col-md-3">
<label for="inputOwner" class="col-form-label">Owner</label>
</div>
<div class="col-md-9">
<aui:input name="owner" id="owner" cssClass="form-control" label=""
value='<%=dto != null ? dto.getOwner(): ""%>'>
</aui:input>
</div>
</div>
<div class="form-group row">
<div class="col-md-3">
<label for="inputContact" class="col-form-label">Business
Contact</label>
</div>
<div class="col-md-9">
<aui:input name="contract" id="contract" cssClass="form-control" label=""
value='<%=dto != null ? dto.getBusinessContact(): ""%>'>
<%-- <aui:validator name="required"
errorMessage='<%=LanguageUtil.get(pageContext , "service.error.msg.field.bus_contact")%>' /> --%>
</aui:input>
</div>
</div>
<div class="form-group row">
<div class="col-md-3">
<label for="inputKeywords" class="col-form-label">Metadata/Keywords</label>
</div>
<div class="col-md-9">
<aui:input name="keywords" id="keywords" cssClass="form-control" label=""
value='<%=dto != null ? dto.getMetadata() : " "%>'>
<%-- <aui:validator name="required"
errorMessage='<%=LanguageUtil.get(pageContext , "service.error.msg.field.keywords")%>' /> --%>
</aui:input>
</div>
</div>
</div>
</div>
</aui:form>
<aui:script>
AUI().ready('aui-base','aui-form-validator', 'aui-overlay-context-panel', function (A) {
var validator1 = new A.FormValidator({
boundingBox: '#<portlet:namespace />fm',
validateOnBlur: true,
selectText: true,
showAllMessages: true,
rules: {
<portlet:namespace />service_name: {
required: true
},
<portlet:namespace />owner: {
required: true
},
<portlet:namespace />contract: {
required: true
},
<portlet:namespace />keywords: {
required: true
}
},
fieldStrings: {
<portlet:namespace />service_name: {
required: '<%=LanguageUtil.get(pageContext , "service.error.msg.field.name")%>'
},
<portlet:namespace />owner: {
required: '<%=LanguageUtil.get(pageContext , "service.error.msg.field.owner")%>'
},
<portlet:namespace />contract: {
required: '<%=LanguageUtil.get(pageContext , "service.error.msg.field.bus_contact")%>'
},
<portlet:namespace />keywords: {
required: '<%=LanguageUtil.get(pageContext , "service.error.msg.field.keywords")%>'
}
}
});
// Listening to validation events
validator1.on('validateField', function (event) {
// Fires when a field is evaluated
});
validator1.on('validField', function (event) {
// Fires when a field contains valid data
});
validator1.on('errorField', function (event) {
// Fires when a field contains invalid data
});
var checkForErrors = function (event) {
alert('in Check Errors');
if (validator1.hasErrors()) {
//fires when hasErrors
}
}
var nodeObject = A.one("#actionSave");
nodeObject.on("click", checkForErrors);
});
</aui:script>
