File Upload validation

0
Hi all, How can I have a red border and a validation message below a file manager widget? I tried all the attributes, but I always get the validation message in a pop up (which I am assuming happens because there's no field that matches the attribute on the page). Many thanks Gonçalo
asked
3 answers
3

Hi Concalo,

Might not be the best way, but you can use conditional visibility and css to get the behaviour you want.

On your entity that inherits form FIle add two attributes e.g. ShowValidationMessage : Boolean and ValidationMessage: String.

Then on your page add a label with the content of ValidationMessage and the class 

alert-danger

. Make the label visible only when ShowValidationMessage is true. Thats the frontend done, now you need to add some logic to set the attribtes when you do your custom validation and refresh the file object.

Hope this helps,

Andrej

answered
0

Hi Concalo,

I'm also experiencing the same issue that my validation feedback on the file upload widget is shown in a popup message instead of below the file upload widget.

For me it wasn't a blocking issue so we left it, but you can create a support ticket for this issue if blocking.

Good luck.

answered
-1

I ended up using HTML snippets and some javascript/jquery to add the css and html mendix usually adds. And then added a ShowValidationMessage attribute to add or remove the css/html. The javascript used is below, just in case someone else wants to do this as well.

  • First snippet (to run when showValidationMessage = true)

 

//get the formgroup div

$('.form-group.mx-name-fileManager1').addClass('has-error');

//check if the div with the validation message was already added

var validationDiv = $('.form-group.mx-name-fileManager1 > div > div');

if (validationDiv.length > 0)

{

validationDiv.show();

}

else

{

//create the validation message div and append it underneath the div with the file upload

var validationMessageDiv = $('<div class="alert alert-danger mx-validation-message">Please upload a file.</div>');

$('.form-group.mx-name-fileManager1 > div').append(validationMessageDiv);

}

 

  • Second snippet (to run when showValidationMessage = false)

 

$('.form-group.mx-name-fileManager1').removeClass('has-error');

$('.form-group.mx-name-fileManager1 > div > div').hide();

 

answered