Intro component with Signup form

Community feedback

• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Elroy,

  Great to see another solution from you, nice one!

  I found this one a lot trickier than it looked. Florin's JavaScript Client-side Form Validation - YT video is an invaluable resource for this one.

  Happy coding!

  Marked as helpful

  1

  ---

  

  Elroy Toscano•630

  @elroytoscanoPosted almost 3 years ago

  @darryncodes Hey Darryn, yes it should've been a "Junior" level challenge. I did check out that video, it did cover the basics of validation, I wanted a more in depth explanation of the validation.

  After researching a little more, found this resource which goes about client side form validation in a more structured way.

  1

  

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  oh awesome @elroytoscano, I'll check that out and keep hold of the link.

  This MDN one is pretty good too!

  Marked as helpful

  1

  

  Elroy Toscano•630

  @elroytoscanoPosted almost 3 years ago

  @darryncodes This one is really well explained. Thanks mate!

  1
• 

  Sönke Martens•120

  @RibosomPosted almost 3 years ago

  I really like your solution, especially the animations (great idea). From a design perspective, I like it pretty much, even if it is not exactly like the template.

  Regarding the validation, I would do it differently (but you have to decide yourself, if my solution can help you) Maybe some ideas work for you as well (The ideas are copied from my solution, which I didn't submit^^) I really think you could simplify your html/js with a little different approach. And then not only one error message, would be shown on submit:

  Use real submit input (advantage, click listener would also be activated on submit with keyboard)

  <input class = "..." type = "submit" value = "Claim your free trial">
  

  I added a event listener, which adds a "submitted" class to the form (helps to react on form submit in css)

      document.querySelectorAll("input[type='submit']").forEach(input => {
          input.addEventListener("click", () => {
              input.form.classList.add("submitted");
          });
      });
  

  Similar I added classes, when the inputs are changed or when validation is invalid. You can even put different invalid classes depending on the validation error by using input.validity in JS (I used the <input type="email" ...> default validation, here your solution might be better):

      document.querySelectorAll("input").forEach(input => {
          input.addEventListener("input", () => {
              refreshInputInvalidClasses(input);
          });
          input.addEventListener("invalid", () => {
              refreshInputInvalidClasses(input);
          });
      });
  
      function refreshInputInvalidClasses(input) {
          if (input.validity.valueMissing) {
              input.parentElement.classList.add("invalid--required");
          } else {
              input.parentElement.classList.remove("invalid--required");
          }
  
          if (input.validity.typeMismatch) {
              input.parentElement.classList.add("invalid--type-mismatch");
          } else {
              input.parentElement.classList.remove("invalid--type-mismatch");
          }
      }
  

  And then I added the error messages as custom html attributes, which can also be read in css/scss. For example for the email:

                  <div class = "input-container"
                       data-error-required  = "Email Address cannot be empty"
                       data-error-type-mismatch  = "Looks like this is not an email">
                      <input class = "input-field"
                             name = "email"
                             type = "email"
                             aria-label = "Email Address"
                             placeholder = "Email Address"
                             required>
                  </div>
  

  When using pseudo elements, you even don't need the validation messages as separate divs/spans, but can read them with attr in css/scss:

  form.submitted .input-container.invalid--required::after {
      content: attr(data-error-required);
  }
  
  form.submitted .input-container.invalid--type-mismatch::after {
      content: attr(data-error-type-mismatch);
  }
  

  The error icon can be set as background-image, which may be simpler:

  form.submitted .input-container .input-field:invalid {
      ...
      background-image: url("images/icon-error.svg");
      background-repeat: no-repeat;
      background-position-x: calc(100% - 24px);
      background-position-y: calc(50%);
  }
  

  Marked as helpful

  0

  ---

  

  Elroy Toscano•630

  @elroytoscanoPosted almost 3 years ago

  @Ribosom This is a unique approach for solving the validation problem.

  The input type="submit" and "error messages as custom html attributes" are a unique approach and will look into them.

  I knew about the pseudo elements approach, I opted for div/span approach for checking it's feasibility. Thanks for the info.

  1