Newletter Signup Form JS

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 3 months ago

  Hey!

  You stepped on the JS part, congrats =) And I can see that you are using BEM, cool!

  By the way, the action attribute of the form are for url where it will send data, so submit doesn't fit there. And I have a few doubts about novalidate and accessibility.

  Also I like that you think about set focus on the email field! There is an autofocus attribute you can use as well.

  To answer your question about SCSS - it isn't totally must have stuff, but in general the more tools you are familiar to the better. Also a lot of companies use it, so if you will search a job in the webdev field it will be another plus to your portfolio.

  Personally I prefer plain CSS with autoprefix plugin, but I won't say that it is a best way. And If you already have a decent CSS foundation all those tools will be much easier to learn.

  Marked as helpful

  1
• 

  P

  Arnaud Lahaut•200

  @Arnotts33Posted 3 months ago

  Hey Alex!

  Thanks for another feedback, always appreciated!

  I took the novalidate from the form course just before this challenge. Thing is when I get rid of this and the action attribute, it's not working. I don't get the error message.

  Thanks for your advice about SCSS :)

  1

  ---

  

  Alex•3,130

  @Alex-Archer-IPosted 3 months ago

  @Arnotts33

  Oh, hey! The comments section here are really strange sometimes. I barely notice your answer!

  Do you mean that you don't get your own custom message? When you delete novalidate attribute browser turns on it's own validation. And if you write the email without "@" browser shows it's own error and the form won't be submitted - that's why your message didn't appear. But it will if you write email with "@" but without dot after, so your regex still work.

  The action doesn't affect from submission since you are using event.preventDefault(). The purpose of action attribute is to specify url of the server to send form data without JS.

  I can explain why I have doubts about novalidate thing. The default browser form validation contains messages which could be recognized by screen readers. But if you use your own validation you should somehow tell them what went wrong - I believe there is special aria tag for error messages or something like this. I really doesn't dive deep in the topic of form accessibility, so that why it is only doubts =)

  And also I suggest you to add some logic to remove error status when user start to fix error. I mean if I'll write wrong email and input goes red I have to write correct email on the red field. For example, you can dismiss the error status when user start to type again or when input get focus. It will be a little UX improvement =)

  Marked as helpful

  1

  

  P

  Arnaud Lahaut•200

  @Arnotts33Posted 3 months ago

  Hey @Alex-Archer-I !

  Thanks for taking the time to go deeper into this :)

  I will definitely try to improve on this solution and follow your suggestions. Very much appreciated!

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 3 months ago

  @Arnotts33

  Hey, you're welcome as always =)

  0