How to Edit The Input Field Error Messages

When using one of our native Email Service Provider integrations, by default OptinMonster will show standard error messages for the Email Address, Name, and Phone input fields, as well as the Required Privacy Policy Checkbox.

These input field error messages can be edited to use your own custom text with a few lines of Javascript, placed in the footer of your site.

document.addEventListener('om.Campaign.load', function(event) {
	var inputs = event.detail.Campaign.Form.inputs;
	var fieldName = '', i = 0;
	for (i = 0; i < inputs.length; ++i) {
		fieldName = inputs[i].getAttribute('data-name');
		inputs[i].dataset.errorRequired = fieldName + ' is ALWAYS required';
		inputs[i].dataset.error = 'a valid ' + fieldName + ' is required';
	}
});

If you are looking to translate the entire error message, you will need to be more specific than the above snippet:

document.addEventListener('om.Campaign.load', function(event) {
	var inputs = event.detail.Campaign.Form.inputs, i = 0;
	for (i = 0; i < inputs.length; ++i) {
		switch( inputs[i].getAttribute('data-name') ) {
			case 'Name':
				inputs[i].dataset.errorRequired = 'NAME field is always required';
				inputs[i].dataset.error = 'The NAME field is required.';
				break;
			case 'Email Address':
				inputs[i].dataset.errorRequired = 'EMAIL ADDRESS field is always required';
				inputs[i].dataset.error = 'The EMAIL ADDRESS field is required.';
				break;
		}
	}
});
IMPORTANT: Remember to place your code in <script> tags, for example:
<script type="text/javascript">
    // Your Javascript here..
</script>

If you are looking to hide the Oops! We were unable to submit the form. Please fix the errors below. messages, and optionally replace with your own message (like if you need to translate the message), you could do so with custom css:

.om-form-validation-errors-header {
	display: none; /* Hide the original message */
}
/* Omit the folliwng if you do not want to replace the "Oops" message */
.om-field-error:before {
	content: "Oops!"; /* Override the "oops" text */
	display: block;
	margin-bottom: 10px;
}
IMPORTANT: Remember to place your css code in <style> tags, for example:
<style>
    // Your CSS here..
</style>