Enforce users to enter only text in a text input field

[Volomeister]

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:

 

<script>
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.setCustomValidity('')
  return}
  e.target.setCustomValidity(errorMessage)
  e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, '')
  e.target.reportValidity()
})
})
})
}

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

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

</script>

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'