Validation className

[seyyed-sina]

Thanks for this brilliant library,
I wonder how could it possible to customize validation message with className or something to style it?
I need to edit some style in validation message (font. color, ....)

[alioguzhan]

Hi @spostad7 ,

You can pass a string or a React Node. In fact, anything that React can render is valid for validationMessage. Both are valid below:

This:

<EdiText {...otherprops} validation={v => v.length > 5} validationMessage={'invalid value'} />

Or this:

<EdiText 
  {...otherprops}
  validation={v => v.length > 5}
  validationMessage={<span className="invalid-value-message">Invalid Value</span>}
/>

Or even this:

function renderValidationMessage() {
  return <div className="invalid-value">Invalid Value.</div>
}

<EdiText {...otherprops} validation={v => v.length > 5} validationMessage={renderValidationMessage()} />

[seyyed-sina]

That's perfectly fine!
Thank you for quick response

[seyyed-sina]

@alioguzhan ,
I tried the second example (using simple div element), but it seems it doesn't show any text message on the screen. It does come to DOM but the message doesn't show in the screen. Also it's notable that it insert my tag into current validation tag. I need the situation to completely overwrite current Node to my jsx element.
here is my code so far:

<Editor
	type="textarea"
	value={
		state.companyOverviewDescription ||
		'------'
	}
	validation={(val) =>
		val.length < descriptionLimit
	}
	validationMessage={
		<div className="invalid-feedback">
			{
				t('validation.max', {
					count: descriptionLimit
				}) as string
			}
		</div>
	}
	onSave={(val) =>
		handleUpdate({
			companyOverviewDescription: val
		})
	}
/>

[alioguzhan]

Can you make a codesandbox reproduces this behavior, so I can check it on a full working example ?

Thanks

[alioguzhan]

This is because of the same reason as #159? if so we can close this as well for now.

[seyyed-sina]

For somehow for textarea type you are correct, as you said we can not have validation on controlled save button on pressing Enter. But it's been more advance if we could completely overwrite validation tag with custom validation message rather than insert new tag into current tag, because it has its own style and may conflict with it's children style...

[alioguzhan]

Ok so for backward compatibility, I can't remove the existing validation content container. But I added a new attribute validation-container to the validation container element. So now we can override the styles of the validation container element as well as the child content. There are already examples in README but here it is:

div[editext='validation-container'] {
  color: #d3d3d3;
  text-decoration: underline;
}

Note: v5.1.0 is released with this update. You can upgrade the react-editext to test it on your local environment.

Please try this and let me know if that works.

[alioguzhan]

@all-contributors add @spostad7 for ideas.

[allcontributors]

@alioguzhan

I've put up a pull request to add @spostad7! 🎉