Input Validate: JS Bugs

JavaScript
1

I’m pretty new to JS. Could anybody tell me why this code isn’t making #validate-message’s display block on invalid input?

 <div id="name-container">
        <p id="validate-message">Error</p>
        <label id="name-label" class="label-small">Name: </label><input id="name" class="text" type="text" placeholder="John Doe" pattern="[A-Za-z.']{3,20}" required>
        </div>
        <script>
          const name = document.getElementById('name');
          const error = document.getElementById('validate-message')
          
          name.addEventListener('oninput', function (){
            if(name.validity.patternMismatch){
              error.style.display.block;
            }
          });
        </script>

Thank you. :slightly_smiling_face:

2

The event it should listen for should be "input" or "change" - the on part is only used with event attributes (on HTML elements on the page).

3

Thanks @lasjorg , for your help. I made the change, but it still doesn’t work. Here’s my updated code:

<div id="name-container">
        <p id="validate-message">Error</p>
        <label id="name-label" class="label-small">Name: </label><input for="name-label" class="text" type="text" placeholder="John Doe (required)" pattern="[A-Za-z.']{3,20}" required>
        </div>
        <script>
          const name = document.getElementById('name');
          const error = document.getElementById('validate-message')
          
          name.addEventListener('input', function (){
            if(name.validity.patternMismatch){
              error.style.display.block;
            }
          });
        </script>
4

You are missing the id on the input element now.

Edit: also your style code isn’t correct. The property is on the left-hand side and the value is assigned to it.

error.style.display = "block";

Just as an aside, I would recommend using classes and the classList property. It has methods on it for adding, removing, and toggling classes. Inline styles can cause issues with specificity and are not as maintainable.

6

Thanks @lasjorg , it worked. Now I’m adding more complexity to it though. When the input is not long enough, it should display one message, and when the input has invalid characters, it should display another. But… :face_with_diagonal_mouth: I broke my code again. Where have I gone wrong???

        <p id="length-error">length error</p>
        <p id="character-error">character error</p>
        <label id="name-label" class="label-small">Name: </label><input id="name" for="name-label" class="text" type="text" placeholder="John Doe (required)" pattern="[A-Za-z.']" required>
        </div>
        <script>
          const name = document.getElementById('name');
          const lengthError = document.getElementById('length-error');
          const characterError = document.getElementById('character-error');
          
          name.addEventListener('input', function (){
            if (name.value.length < 3)
              {
                lengthError.style.display = "block";
              }
            if (name.value.validity.patternMismatch){
                characterError.style.display = "block";
            }
            else{
              lengthError.style.display = "none";
              characterError.style.display = "none";
            }
          });
        </script>

Thanks again for your kind help!

7

name.value is a string, I’m not sure if it can have the ValidityState object you are after
I would think more as name.validity

8

I think you may want to include a submit button which fires your corrected function.

Otherwise the error messages will appear when the page loads.

Try using just the first condition without the function, and use the value attribute in the input element. Once you obtain the correct `conditional statement, wrap a function around it. Just a thought.

Happy coding

9

Thanks @Teller . The error messages fire on invalid input.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.