Please Help Me Spot Bugs in my JS:

Code Feedback
1

Hello, I’m creating a form. I doing validation via the pattern attribute and JS. With my #name input, when the user types an invalid number of characters, they are supposed to receive one error message, and when they type an invalid character period, they are supposed to receive another error message. Right now, it seems my first if statement is working, but my second if, and my else appear to be broken.

I’m pretty new to JS, and am having trouble spotting my bugs. Would you help?

Here’s my code:

<div id="name-container">
        <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>

Thank you. :slightly_smiling_face:

2

Hi there. Please check the console for errors as it can be very enlightening. name.value.validity is undefined which means it’s not actual property on the object. When JavaScript encounters an error, things go wonky. The value in the name element is just a string. You’re looking for name.validity.patternMismatch probably.

3

Thank you Aaron. It worked. I am having another problem though. My else statement isn’t working. Here’s my code:

       <div id="name-container">
        <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.validity.patternMismatch){
                characterError.style.display = "block";
            }
            else{
              lengthError.style.display = "none";
              characterError.style.display = "none";
            }
});
        </script>

Thanks again for your help @a2937 !

4

Hey @FrontEndCodeLearner,

There’s a fewthings you’ll need to do to get this working as you intended.

First, please try to do this yourself because it will be benefiical for you, but I made a JSFiddle with a couple comments about what I mention below, as well, if you want to see it working: https://jsfiddle.net/s64kexfb/

  1. Add a + sign to the end of the pattern (which translates to the pattern itself can accept any length) so that the pattern mismatch only happens based on the characters you specified in the square brackets. You can control the length of the string with the pattern, but since you separated the errors for the two, it makes the most sense to allow the pattern to accept any length and then handle the logic as you’re already doing.
  2. Add an “else” to the if (name.value.length < 3) statement. You need to handle the logic for the length in the same scope so adding an else to this if makes the most sense.
  3. Remove the line lengthError.style.display = "none"; from the else statement for the patternMismatch on the name input. Again, since everything is separated, it makes the most sense to handle things where they should be handled.

With all of that in place, everything works as it should!

5

Thanks @marcusparsons ! It worked. My code now dose just what I want it to do.