Creating a TextArea with Javascript Validation leveraging CSS Pseudo Classes and Regex

Question

Creating a TextArea with Javascript Validation leveraging CSS Pseudo Classes and Regex

I currently have a PHP/HTML form with input validation using HTML input patterns. To indicate that the entered input is correct, I utilize the CSS pseudo properties user-invalid/user-valid through a 'check_valid' class as shown below:

input.check_valid:user-invalid     { border: 4px dotted red;   }
input.check_valid:user-valid       { border: 4px solid  green; }

The issue arises with textareas due to the lack of pattern support. Although I have:

textarea.check_valid:user-invalid  { border: 4px dotted red;   }
textarea.check_valid:user-valid    { border: 4px solid  green; }

This only checks the minlength/maxlength of the textarea content and not the actual content itself.

Server-side validation (in PHP) successfully checks the textarea content, but I aim to implement a visual indication - a green/red border similar to the one for input fields when the content matches a specific regex pattern.

I am seeking a JavaScript snippet to emulate the behavior of check_valid:user-invalid/check_valid:user-valid when the user exits the textarea after entering content. This snippet should validate the content against a regex pattern (enabling pattern support for textareas).

Below is my incomplete attempt thus far:

const textArea1 = document.getElementById("textarea1");

textArea1.addEventListener("change", (event) => {
  let patternTextArea1 = /^[a-zA-Z0-9:\s,.'&()\/\-]{10,550}$/;
   
  if (// test textarea content against the regex) {
      // apply user-valid - green border
  } else {
      // apply user-invalid - red dotted line
  }
});

My JavaScript skills are lacking, as evident from the above code. I would greatly appreciate any assistance in solving this issue.

javascript html css

Answer 1

Answer №1

Implementing pattern validation for a textarea

While the textarea element itself does not support a pattern attribute, you can create one by utilizing a data attribute.

By incorporating a pattern check within the change event, you are able to validate the input and employ setCustomValidity to include a specific validation message.

The browser will handle the display of this custom message similarly to how it handles checks for minlength, maxlength, and required fields.

https://i.sstatic.net/r0VdyPkZ.png

Note: Pseudo classes like :invalid and :valid automatically trigger based on states. However, custom validation errors have a fixed language, unlike standard pattern errors. To implement internationalization would require additional coding (not demonstrated here).

Code Example The provided example is purposely simplistic to illustrate its functionality.

const textarea = document.querySelector('textarea')

textarea.addEventListener('input', () => {
  const reg = new RegExp(textarea.dataset.pattern, 'gmi');
  textarea.setCustomValidity('');
  if (!reg.test(textareavalue)) {
    textarea.setCustomValidity('Invalid characters detected in text field');
  }
  textarea.reportValidity(); // optional - displays an error popup
})

textarea {
  height: 2rem;
  padding: 0.5rem;
  border: 4px dotted black;
  outline: none;
}

textarea:valid {
  border-color: green;
}

textarea:invalid {
  border-color: red;
}

textarea:focus::placeholder {
  opacity: 0;
}

<textarea 
  required 
  minlength="10" 
  maxlength="500" 
  placeholder="enter text here"
  data-pattern="(?<!\n)^[()\w\s]+$(?!\n)">
</textarea>

Answer 2

Implementing pattern validation for a textarea

While the textarea element itself does not support a pattern attribute, you can create one by utilizing a data attribute.

By incorporating a pattern check within the change event, you are able to validate the input and employ setCustomValidity to include a specific validation message.

The browser will handle the display of this custom message similarly to how it handles checks for minlength, maxlength, and required fields.

https://i.sstatic.net/r0VdyPkZ.png

Note: Pseudo classes like :invalid and :valid automatically trigger based on states. However, custom validation errors have a fixed language, unlike standard pattern errors. To implement internationalization would require additional coding (not demonstrated here).

Code Example The provided example is purposely simplistic to illustrate its functionality.

const textarea = document.querySelector('textarea')

textarea.addEventListener('input', () => {
  const reg = new RegExp(textarea.dataset.pattern, 'gmi');
  textarea.setCustomValidity('');
  if (!reg.test(textareavalue)) {
    textarea.setCustomValidity('Invalid characters detected in text field');
  }
  textarea.reportValidity(); // optional - displays an error popup
})

textarea {
  height: 2rem;
  padding: 0.5rem;
  border: 4px dotted black;
  outline: none;
}

textarea:valid {
  border-color: green;
}

textarea:invalid {
  border-color: red;
}

textarea:focus::placeholder {
  opacity: 0;
}

<textarea 
  required 
  minlength="10" 
  maxlength="500" 
  placeholder="enter text here"
  data-pattern="(?<!\n)^[()\w\s]+$(?!\n)">
</textarea>

Answer 3

Answer №2

Once the change event triggers on the textarea element, you have the ability to assign the same value to a hidden input element that includes the pattern attribute.

// Prevent the default invalid message from displaying
document.forms.form01.addEventListener('invalid', e => {
  e.preventDefault();
}, true);

document.forms.form01.addEventListener('change', e => {
  let form = e.target.form;
  if (e.target.dataset.name) {
    // Set the input field to match the value of the textarea
    form[e.target.dataset.name].value = e.target.value;
    // Apply appropriate class name based on validity
    e.target.classList.add('valid');
    if (!form[e.target.dataset.name].validity.valid) {
      e.target.classList.replace('valid', 'invalid');
    }
  }
});

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  let data = new FormData(e.target);
  console.log(...data);
});

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

textarea.invalid {
  border: 4px dotted red;
}

textarea.valid {
  border: 4px solid green;
}

input:user-invalid {
  border: 4px dotted red;
}

input:user-valid {
  border: 4px solid green;
}

<form name="form01">
  <input type="text" name="other" pattern=".{2,10}" required>
  <textarea data-name="longtext" name=""></textarea>
  <input type="text" name="longtext"
    pattern="[a-zA-Z0-9:\s,\.'&\(\)\/\-]{10,550}"
    style="display:none" required>
  <button type="submit">Submit</button>
</form>

Answer 4

Once the change event triggers on the textarea element, you have the ability to assign the same value to a hidden input element that includes the pattern attribute.

// Prevent the default invalid message from displaying
document.forms.form01.addEventListener('invalid', e => {
  e.preventDefault();
}, true);

document.forms.form01.addEventListener('change', e => {
  let form = e.target.form;
  if (e.target.dataset.name) {
    // Set the input field to match the value of the textarea
    form[e.target.dataset.name].value = e.target.value;
    // Apply appropriate class name based on validity
    e.target.classList.add('valid');
    if (!form[e.target.dataset.name].validity.valid) {
      e.target.classList.replace('valid', 'invalid');
    }
  }
});

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  let data = new FormData(e.target);
  console.log(...data);
});

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

textarea.invalid {
  border: 4px dotted red;
}

textarea.valid {
  border: 4px solid green;
}

input:user-invalid {
  border: 4px dotted red;
}

input:user-valid {
  border: 4px solid green;
}

<form name="form01">
  <input type="text" name="other" pattern=".{2,10}" required>
  <textarea data-name="longtext" name=""></textarea>
  <input type="text" name="longtext"
    pattern="[a-zA-Z0-9:\s,\.'&\(\)\/\-]{10,550}"
    style="display:none" required>
  <button type="submit">Submit</button>
</form>

Answer 5

Answer №3

Have you ever wondered how to ensure an element is either :user-valid or :user-invalid? Surprisingly, it is possible! By utilizing the

inputField.setCustomValidity(msg)

method, you can achieve this functionality. This approach technically targets :valid and :invalid, but with some CSS manipulation and the addition of a class called .user-interacted, you can specifically check for validity only when user interaction occurs.

Essentially, there are two key components here: using setCustomValidity and incorporating the .user-interacted class.

textarea.addEventListener("input", checkOnServer)

function checkOnServer(ev) {
  var elem = ev.target

  setTimeout(function() {
    // AJAX query to server
    elem.classList.add("user-interacted")
    var value = elem.value
    var msg = value.length > 3 ? '' : 'Length must be longer than 3 chars'
    elem.setCustomValidity(msg)
  }, 100)

}

textarea.check_valid.user-interacted:invalid {
  border: 4px dotted red;
}

textarea.check_valid.user-interacted:valid {
  border: 4px solid green;
}

textarea {
  outline: none;
}

<p>let's assume valid is > 3 chars</p>
<textarea id="textarea" class="check_valid" cols="80" rows="5"></textarea>

Answer 6

Have you ever wondered how to ensure an element is either :user-valid or :user-invalid? Surprisingly, it is possible! By utilizing the

inputField.setCustomValidity(msg)

method, you can achieve this functionality. This approach technically targets :valid and :invalid, but with some CSS manipulation and the addition of a class called .user-interacted, you can specifically check for validity only when user interaction occurs.

Essentially, there are two key components here: using setCustomValidity and incorporating the .user-interacted class.

textarea.addEventListener("input", checkOnServer)

function checkOnServer(ev) {
  var elem = ev.target

  setTimeout(function() {
    // AJAX query to server
    elem.classList.add("user-interacted")
    var value = elem.value
    var msg = value.length > 3 ? '' : 'Length must be longer than 3 chars'
    elem.setCustomValidity(msg)
  }, 100)

}

textarea.check_valid.user-interacted:invalid {
  border: 4px dotted red;
}

textarea.check_valid.user-interacted:valid {
  border: 4px solid green;
}

textarea {
  outline: none;
}

<p>let's assume valid is > 3 chars</p>
<textarea id="textarea" class="check_valid" cols="80" rows="5"></textarea>

Creating a TextArea with Javascript Validation leveraging CSS Pseudo Classes and Regex

Answer №1

Answer №2

Answer №3

Similar questions

Issue with Bootstrap carousel - the carousel.on method is not recognized

What is the best way to showcase a scope with a dropdown menu?

Tips for creating a form-flip, similar to a card-flip effect, using web technologies

I can't figure out why I keep receiving the InvalidArgumentError for H.Map with Argument #0 [object Object]

Steps to display a div on top of a background image

Is it possible to nest Route components in react-router version 4.x?

Combine several dictionary values under a single dictionary key in JavaScript

JavaScript: Choosing between explicit imports and the * sign

Have you ever encountered the orientationchange event in JavaScript before?

Access a component within an inactive carousel slide

Building hierarchical comments in React Native

After resolving a promise, what is the process for loading a Next.js App?

eliminate gaps between hyperlinks using cascading style sheets

Choosing numerous items for carrying out a task

React-Redux showing no errors despite non-functional Redux store

Creating Custom Styles with Polymer for <content> Elements

Is it possible to assign a numerical value to the prev() function or the prevUntil() function in jQuery?

What could be causing my website to automatically adjust the CSS height on its own?

I am facing an issue where my react app is only rendering in one file and not when imported into another

Retrieve Files with Angular Framework