AUI form validation in Jira Service Desk Edited

[Pawel Karda]

JIRA v7.13.0, JSD v3.16, AUI v7.9.9

 I need to perform form validation using Javascript. Let's just say that doing it using workflow validators is not an option for me.

According to https://docs.atlassian.com/aui/7.9.9/docs/form-validation.html, to prevent users from submitting invalid forms, the form validation library will intercept submit events that contain invalid, validating, or unvalidated elements.

It's not happening in my case.

To demonstrate the issue in a simple way, my form has one field (see below). I've injected data-aui-validation-field and data-aui-validation-required attributes using javascript loaded via a web resource module.

When I submit the form with an unvalidated field, I see the validation error msg (in this case "This field is required"), but the form is submitted anyway.

What am I missing here?

<form action="" method="post" class="aui vp-form top-label vp-request-form" novalidate="novalidate">
 <div class="field-group">
 <label class="field-label" for="description">Description <span class="vp-optional">(optional)</span></label>
 <div class="field-container">
 <textarea class="textarea _aui-form-validation-initialised _aui-form-notification-initialised" rows="6" cols="10" name="description" id="description" style="overflow: hidden; height: 165px;" data-aui-validation-field="" data-aui-validation-required="required" resolved="" data-aui-notification-field="" data-aui-validation-state="unvalidated"></textarea>
 <span class="aui-icon aui-icon-small aui-icon-notification" original-title=""></span>
 </div>
 </div>
</form>

[Ved Prakash Arya]

Hi, I am also facing the same issue, I added/registered a new validator, it's showing the error if I passed invalid input, but it also submitting the form.
Could anyone guide me why?

Here is a sample code
 
<input class="test" type="text" 
data-aui-validation-field
data-aui-validation-maxchars="10"
data-aui-validation-when='keyup'
data-aui-validation-maxchars-msg="Allowed 10 chars Only">
</input>


AJS.formValidation.register(['maxchars'], function(field) {
if(field.el.value.length > 10){
field.invalidate(AJS.format('Allowed {0} chars only', field.args('maxchars')));
} else {
field.validate();
}
});

I just want to implement data-aui-validation-maxlength    Since it deprecated so do not want to use and maxlength does not allow more character than specified so no error message