How to show a custom validation message over an input field using java script and jQuery?

Hi All, I have an input form with some fields. I want to show a custom required field message if the field is left blank. My client don't want the standard required field message. So I want to show a required field message using javascript and jQuery. Also I have a list of records with in the page. In that list, a row contains a checkbox and some input fields. Now I want to show required field message over those input fields only when I check the check-box with in that row. Can anyone help me to achieve this. Thanks in advance.   Regards, Venkat
3 answers

On save button of your dataview (form), you can call a microflow. In this microflow add your custom validation logic (required, length etc).
Let say you have to require a name, you can do this in an exclusive split by checking the name attribute != empty and then in its false path, attach a Validation Feedback activity where you can set your custom message for name variable. Whatever you type here as validation message is then displayed in your form.


What do you mean by a custom required field message? 



Hello Venkatesh,

If I understand this correctly, you have javascript/jQuery fields on your form, if this is the case Mendix does not support custom validation on javascript fields. 

There are two options I can think of:

  1. Build a widget for your inputs – this way you can do your validation in Mendix which can trigger an onValidation event in your widget which you can handle the way you want to.
  2. Build your validation in javascript/jQuery – you’ll have to construct/deconstruct the validation div nodes yourself. See DOM element creation.

Neither option is too pleasant, but if you want to be in line with Mendix I would suggest wrapping your inputs in widgets, there are also other input widgets you can analyse to get ideas on how your validation needs to be built.

If my assumption wasn’t correct and you’re just trying to build custom validation, you can always style the display method of your validation with CSS.

Edit: You can assign a class to the inputs and if I remember this correctly the validation div will be situated within the input’s div therefore you can use that for styling.

So you could do something like: 

  1. Assign myclass as a class for your input
  2. Add styles for .myclass .<insert validation div class here>
  3. Trigger the validation through a microflow

Validating with javascript/jQuery is tricky because you need to trigger it before the button effectively comes into action.

Hope this helps