#75 - Entradas de caracteres no permitidas

Mostrar un mensaje de error personalizado si un usuario introduce algo que usted establece en una entrada.

Video Tutorial

Loom
tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

36 lines
Paste this into Webflow
<!-- 馃挋 MEMBERSCRIPT #75 v0.1 馃挋 DISALOWED CHARACTER INPUTS -->
<script>
document.addEventListener('DOMContentLoaded', function() {
 聽const inputFields = document.querySelectorAll('[ms-code-disallow]');
 聽inputFields.forEach(inputField => {
 聽 聽const errorBlock = inputField.nextElementSibling;
 聽 聽errorBlock.innerHTML = ''; // Use innerHTML to interpret tag<br> tags

 聽 聽inputField.addEventListener('input', function() {
 聽 聽 聽const rules = inputField.getAttribute('ms-code-disallow').split(')');
 聽 聽 聽let errorMessage = '';

 聽 聽 聽rules.forEach(rule => {
 聽 聽 聽 聽const parts = rule.trim().split('=');
 聽 聽 聽 聽const ruleType = parts[0].substring(1); // Remove the opening parenthesis
 聽 聽 聽 聽const disallowedValue = parts[1];

 聽 聽 聽 聽if (ruleType.startsWith('custom')) {
 聽 聽 聽 聽 聽const disallowedChar = ruleType.split('-')[1]; // Extract the character after the string'-'
 聽 聽 聽 聽 聽if (inputField.value.includes(disallowedChar)) {
 聽 聽 聽 聽 聽 聽errorMessage += disallowedValue + 'tag<br>'; // Add line keywordbreak
 聽 聽 聽 聽 聽}
 聽 聽 聽 聽} else if (ruleType === 'space' && inputField.value.includes(' ')) {
 聽 聽 聽 聽 聽errorMessage += disallowedValue + 'tag<br>'; // Add line keywordbreak
 聽 聽 聽 聽} else if (ruleType === 'number' && /\d/.test(inputField.value)) {
 聽 聽 聽 聽 聽errorMessage += disallowedValue + 'tag<br>'; // Add line keywordbreak
 聽 聽 聽 聽} else if (ruleType === 'special' && /[^a-zA-Z0-9\s]/.test(inputField.value)) { // Notice the \s here
 聽 聽 聽 聽 聽errorMessage += disallowedValue + 'tag<br>'; // Add line keywordbreak
 聽 聽 聽 聽}
 聽 聽 聽});

 聽 聽 聽errorBlock.innerHTML = errorMessage || ''; // Use innerHTML to interpret tag<br> tags
 聽 聽});
 聽});
});
</script>

Script Info

Versionv0.1
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in UX