Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Added example on how to adjust the validation message for specific form field #6937

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,49 @@ define(['jquery'], function($) {
}
});
```

## Modify an existing validation message

It is possible to adjust the existing error message for form fields.
This is implemented in the core codebase in scope of the [`Magento_CatlogSearch` module]({{ site.mage2bloburl }}/{{page.guide_version}}/app/code/Magento/CatalogSearch/view/frontend/templates/advanced/form.phtml).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @vasilii-b. Thank you for the great example. Could I ask you to add an extended explanation of what exactly needs to be done in order to adjust the message for a specific field?

The example below shows how it's done in the core but it does not explain the process explicitly. The question that may appear, do we need to modify the errorPlacement for adjusting the message or it's enough to add the corresponding item into the messages object?

Thank you!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @rogyar,
Thanks for looking into it.
Answering your question - no, the errorPlacement does not affect the modification of the message.
The errorPlacement adjusts where the validation message will show up when the validation rule not passed.

I'll update the file accordingly.
Thank you!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, thank you!

```html
<script>
require([
"jquery",
"mage/mage",
"mage/validation"
], function($){
$('#form-validate').mage('validation', {
errorPlacement: function (error, element) {
var parent = element.parent();
if (parent.hasClass('range')) {
parent.find(this.errorElement + '.' + this.errorClass).remove().end().append(error);
} else {
error.insertAfter(element);
}
},
messages: {
'price[to]': {'greater-than-equals-to': '<?= $block->escapeJs(__('Please enter a valid price range.')) ?>'},
'price[from]': {'less-than-equals-to': '<?= $block->escapeJs(__('Please enter a valid price range.')) ?>'}
}
});
});
</script>
```

The `messages` object is the one that does the job - they key is the input name and the value is a list of validation rules that should be modified for the specified input field.
Here the rule name is the key and the validation message is the value.

```js
$('#form-to-validate').mage('validation', {
messages: {
'input-name': {
'validation-rule-1': 'Validation message 1',
'validation-rule-2': 'Validation message 2',
},
}
});
```

This comes in handy when the error message needs to be specific but the rule does not change.