How to add validation in input field of tabular report form

[Swagatika]

I want to validate that my input field only accepts letters and not numeric values. I have added JavaScript code in the footer block. To display the error message, I have included a <span> element in the HTML block.But code is not working here. Please anyone help me to solve this issue.

[cheonsa]

Hi @Swagatika,

I found this script here in forums that you may also check. This is for Inline Edit. If you would like to apply it in Inline Add, just replace #Mod0InlineEdit with #Mod0InlineAdd and InlineEditHours with InlineAddHours.

 

[Volomeister]

Hi @Swagatika

You can try this solution instead:

 

<style>
.tooltip {
  position: relative;
}
.tooltip .tooltiptext {
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 35%;
  text-wrap: wrap;
}

</style>

<script>
if (document.mainDataPageReadyHandler == undefined) { 
const inputName = 'Full_Name'


const addInputValidation = (InlineAddFormLightBox='') => {
let targetInput = document.querySelector(`${InlineAddFormLightBox} #InlineAdd${inputName}`)



if (targetInput==null) {return}
targetInput.addEventListener('input', e=>{
    
  if (/^([a-zA-Z\s])/.test(e.data) == false) {
    e.target.value = e.target.value.replace(e.data, '')
    addErrorToolTip(e.target)
    }
})
}


const addCopyPasteValidation = (InlineAddFormLightBox='') => {
let targetInput = document.querySelector(`${InlineAddFormLightBox} #InlineAdd${inputName}`)

if (targetInput==null) {return}

targetInput.addEventListener("paste", (e) => {
   e.stopPropagation()
   e.preventDefault()
   
   let clipboardData = e.clipboardData || window.clipboardData
   let pastedData = clipboardData.getData('Text')
   let pastedDataArr = pastedData.split('')
   for (let i=0;i<pastedDataArr.length;i++) {
    if (/^([a-zA-Z\s])/.test(pastedDataArr[i]) == false) {
    addErrorToolTip(e.target)
    return
   }
   }
   e.target.value += pastedData   
})
}

const addErrorToolTip = (input) => {
if (input.parentElement.classList.contains('tooltip')) {return}
input.parentElement.classList.add('tooltip')
input.insertAdjacentHTML('afterend', ` <span class="tooltiptext">Only characters allowed</span>`)
window.setTimeout(()=>{
input.parentElement.classList.remove('tooltip')
input.nextElementSibling.remove()
},3000)
}


const addMutationObserver = () => {
new MutationObserver((mutations)=>{
console.log(mutations)
for (let i=0; i<mutations.length;i++) {
if(mutations[i].addedNodes!=null) {
 if(mutations[i].addedNodes.length> 0) { 
 if (mutations[i].target.getAttribute('id')!=null) {
   if (mutations[i].target.getAttribute('id')=='InlineAddFormLightBox') {

   addInputValidation('#InlineAddFormLightBox')
   addCopyPasteValidation('#InlineAddFormLightBox')
   break
    
 }
 }
}
}
}

}).observe(document.querySelector('body'), {childList: true, subtree: true})

}



const mainDataPageReadyHandler = () => {
addInputValidation()
addCopyPasteValidation()
addMutationObserver()
}

document.addEventListener('DataPageReady', mainDataPageReadyHandler)
document.mainDataPageReadyHandler = 'enabled'
}
</script>

It will prevent input and show a tool tip with an error message if anything but a character or space is added to Full_Name inline add. It also accounts for copy-paste and inline add option on mobile version scenarios.

 

[Swagatika]

@Volomeister 

Thank you for providing this solution. I tried it out, and it worked for me.