Custom validation js not firing in 5.4.

Hi guys, I have some custom js to handle some clientside validation in 5.4.
I can't seem to get it to fire, could someone tell me what I'm doing wrong?

custom-validation.js

(function() {
define(["underscore", "./dom", "./events", "./utils", "./messages",
"./fields"], function(_, dom, events) {

dom.onDocument(events.field.validate,
"[data-validate-quarter-hour]", function(event, memo) {
var max;
max = parseInt(this.attr("data-validate-quarter-hour"));
if (memo.translated % max === 0) {
memo.error = (this.attr("data-quarter-hour-message"));
return false;

});
});

}).call(this);

@Import( module = {"custom-validation"})

@Override
public void render(Field field, Integer constraintValue,
MessageFormatter formatter, MarkupWriter writer,
FormSupport formSupport) {
System.out.println("is validation enabled " +
formSupport.isClientValidationEnabled());
if (formSupport.isClientValidationEnabled()) {
javaScriptSupport.require("t5/core/validation");
writer.attributes(DataConstants.VALIDATION_ATTRIBUTE, true,
"data-validate-quarter-hour",
constraintValue.toString(),
"data-quarter-hour-message", buildMessage(formatter,
field, constraintValue));