Responsive Testimonials Section using Grid

Community feedback

• 

  Mohammed Fakih•1,590

  @javascriptor1Posted over 1 year ago

  Hi onkelarmin ,

  Nice work. If you supply an email like [email protected] , the form won't stop you and will submit even though this email is not valid.

  Use a tested regular expression pattern for email to make sure only valid emails are allowed. Here is one which I use in all my solutions :

  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  

  Note : Top level domain should end with 2 characters

  Also , It's better to disable the built-in validate function in the form with the browser. You can achieve this by adding novalidate property to the form :

  <form action="/" novalidate>
  
        
  </form>
  
  

  Marked as helpful

  0

  ---

  

  onkelarmin•590

  @onkelarminPosted over 1 year ago

  @javascriptor1 Hi Mohammed,

  thank you for taking the time to give me your feedback, much appreciated! It was the first time that I was working with forms, so I was struggling a bit. I actually used a pattern attribute for the first form (probably not the most robust one :D) but thanks to your comment I realized that I missed it for the second form.

  I will have a play with your advice and try to implement it for future projects, since I believe forms are very crucial part of web development and I want to become more confident working with them.

  Just to clarify: Can I use the regular expression pattern that you provided directly in HTML as a pattern attribute or do I need to use JS to make use of it?

  Thanks again, Armin

  0

  

  Mohammed Fakih•1,590

  @javascriptor1Posted over 1 year ago

  Hi @onkelarmin ,

  I think It's better to use the regex pattern in Javascript so you have bigger control over what to do when the input does not match. You can show error messages, change input color, and so on.

  As you may already know, there is a pattern property for the HTML input tag that you can use - I never used it before as I'm still learning Javascript and regular expressions.

  The pattern is provided is copied from the internet and tested to work well , hence I used it in my all solutions.

  Keep coding.🚀

  0