CODEWITHSUNDEEP
javascriptonpaste
pixel
pixel

Reputation: 10577

How to prevent user from copy-pasting text with invalid characters into input text field immediately on copy-paste action?

I have read few answers online and here on stack overflow but I am not finding a solution.

I am trying to prevent user from copy-pasting invalid characters (anything other than a-z A-Z characters) into my input field. I dont want to do this on submit but on copy-paste event.

If I copy paste text that has all invalid characters (like '1234'), my if block will get executed (regex test fails) and that works fine.

However, it does not work if my copied text contains mix of valid or invalid characters (like '12abc' or 'abc12').

How do I prevent user from copy-pasting text with invalid characters into my input text?

I am calling my javascript function on input text element like this:

function validatePaste(e) {
  var regex = /[a-z]/gi;
  var copiedText = e.clipboardData.getData('text')
  console.log(copiedText,regex.test(copiedText) )
  if (!regex.test(copiedText)) {
    e.preventDefault(); //this line executes only if copiedText has all invalid characters
    return false;
  }
}
<input type="text" onpaste="validatePaste(event)">

Upvotes: 1

Views: 1613

Answers (2)

Dipak
Dipak

Reputation: 2308

References:

Character classes ([...]), Anchors (^ and $), Repetition (+, *)

The / are just delimiters, it denotes the start and the end of the regex. One use of this is now you can use modifiers on it.

function validatePaste(e) {
  var regex = /^[a-zA-Z]*$/;
  var copiedText = e.clipboardData.getData('text')
  if (!regex.test(copiedText)) {
    e.preventDefault(); //this line executes only if copiedText has all invalid characters
    return false;
  }
}
<input type="text" onpaste="validatePaste(event)">

Upvotes: 1

mplungjan
mplungjan

Reputation: 178011

You only test there is one char there

Here is a better regex - also we do not need to assign it every time

const regex = /^[a-z]+$/gi; // gi makes A-Z irrelevant

function validatePaste(e) {
  const copiedText = e.clipboardData.getData('text')
  console.log(copiedText, regex.test(copiedText))
  if (!regex.test(copiedText)) {
    e.preventDefault(); //this line executes if copiedText has any invalid characters
    return false;
  }
}
<input type="text" onpaste="validatePaste(event)">

Upvotes: 0

Related Questions