Wet-boew: Form validation: Adding custom errors

[joeltheukranian]

Hi,

I am using Adobe AEM 6.2. I have written a servlet which does a POST and gets JSON back. I want to add my own errors to the form validation errors already presented. Essentially two stage validation:

1. Validation at the field level provided OOTB via WET toolkit.
2. Validation on server side, with errors presented as part of WET-style errors. Just adding mine.

Any suggestions on how to do this?

Thanks
Joel

[thekodester]

You want to change the default error message? If so in the i18n folder add this the the en.js at the very bottom (use cant get the list form the fr.js file):

wb.doc.one( "formLanguages.wb", function() {
/*
 * Change default messages for the jQuery validation plugin.
 * Locale: EN (English; english)
 */
$.extend( $.validator.messages, {
    required: "My new message..."
});
});

You'll also need to update the en.min.js as well as any other languages required. Also are you looking to create a custom validation method? Example of a custom validation method:

/**
 * Function that changes/updates the jQuery Validation methods with custom methods.
 */
// using wb-ready.wb well inherit WET and allows you to make changes during load time
$( document ).on( "wb-ready.wb", function( event ) { 
    // make sure the current page is using the validation
    if(jQuery.validator && jQuery.validator !== 'undefined') {

         // allows you to create functions for a specific validation method
         ( function() {

            function getDate() {
                var date = new Date();
                var month = (date.getMonth()+1).toString();
                var formatedMonth = (month.length === 1) ? ("0" + month) : month;
                var day = date.getDate().toString();
                var formatedDay = (day.length === 1) ? ("0" + day) : day;
                return date.getFullYear() + "/" + formatedMonth + "/" + formatedDay;
            }

            // the actual validation method "futuredate" is the key to call the function
            jQuery.validator.addMethod( "futuredate", function( value, element, params ) {
                if(value) {
                    var date1 = new Date().setHours(0,0,0,0), date2 = new Date(value);
                    return (date1 > date2) ? false : true; // false is invalid and true valid 
                }
                return true;
            }, jQuery.validator.format( "Date must be after " + getDate() )); // this is the default English string
        }() );
    }
});

How to use new method:

<input id="date" class="form-control" type="date" name="date" required="required" data-rule-dateISO="true" data-rule-futuredate="true" />

Since this custom method has no params to take in we use true in data-rule-futuredate="true"

[LaurentGoderre]

Do you want to display errors fromt he server the same way client-side errors are displayed if so this can probably help you

https://github.com/wet-boew/wet-boew/issues/6281#issuecomment-69065780

[joeltheukranian]

Thanks, that worked well.