Jump to content

Enforce users to enter only text in a text input field

Recommended Posts

Hi Caspians

I had a use case where we needed to enforce users entering only text in text input fields (no numbers/special characters allowed)

Below is a solution that can be used for submission form/details DataPages. The code can be added to the header or footer:


if (document.addInputListener == undefined) {
const txtInputNames = ['Txt1', 'Txt2']
const errorMessage = 'Please enter text only'

const addInputListener = () => {
txtInputNames.forEach(inputName => {
document.querySelectorAll(`form[action*="[@cbAppKey]"] input#InsertRecord${inputName}, form[action*="[@cbAppKey]"] textarea#InsertRecord${inputName}, form[action*="[@cbAppKey]"] input#EditRecord${inputName}, form[action*="[@cbAppKey]"] textarea#EditRecord${inputName}`).forEach(HTMLInput=>{
HTMLInput.addEventListener('input', e=>{
e.target.value = e.target.value.replace(/\s{2,}/g, ' ')
 if (/^[A-Za-z\s]+$/.test(e.target.value)) {
  e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, '')

const DataPageReadyHandler = (e) => {
 if (e.detail.appKey != '[@cbAppKey]') { return }

document.addEventListener('DataPageReady', DataPageReadyHandler)
document.addInputListener = 'Enabled'


You would need to customize this array so it holds comma-separated names of your text fields where you need to enforce this solution:

const txtInputNames = ['Txt1', 'Txt2']

Here you can customize the message that users will see when entering something other than text:

const errorMessage = 'Please enter text only'


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...