HTML 5 form validation and form handling

Problem Statement


Create one form having following fields


1) Email ( with html5 email validation).


2) Password (It should take minimum 6 charactors ).


3) Your project URL ( with html5 url validation).


4) Project completion date ( with html5 date validation).


5) Current month ( with html5 month validation).


6) Current week (with html5 week validation).


7) Current time (with html5 time validation).


8) Select color (with html5 color features).


9) Age (with html5 range features and also show the selected age ).


10) Your hobbies (with html5 data list ).



Expected output



Solution

        Form validation
        
        
            form, p{
                width: 18%;
                margin: auto;
            }
            form *{
                height: 30px;
            }
            form > input[type=text]{
                height: 50px;
            }
        
    
    
        Fill The Form
        
                
                
                
                
                
                
                
                Select color:
                Age:
                Hobbies:
                                          
                                            
                                            
                                            
                                            
                                            
                                          
                
        
    

1) Can this solution be improved?

2) Can regex patterns be avoided?

Validating HTML5 Code

It seems that you are new to HTML5, so it's a good idea to validate your code. You have 14 errors and 5 warnings in your code:

• autofocus="on" should be autofocus

• Your email regex is invalid (because of the - which needs to be escaped).

• You can't have a placeholder for date, month, week, time (it doesn't make that much sense)

• You can't use required with color or range (it's automatically set to some value, so requiring it doesn't make sense)

• Options must have a value or a label

Problem Statement vs Your Code

• range is probably not ideal for age, but as it's in the spec, there's nothing you can do about it. But: For me, it doesn't show the age in firefox or chrome. You probably need JavaScript to do that.

• Your password pattern is quite restrictive. The spec says to set a minimum of 6 characters, which makes sense. But restricting what those characters might be, or the length of the password are not good ideas.

• Your email pattern is too strict. There are TLDs that are more than 3 characters. The local part of an email can contain more than alphanum + _-., and the domain can also contain a lot more than a-z. Also, {3, 4} matches {3, 4} literally, which doesn't make that much sense. Just use the html5 email validation like the spec says.

Other

• autocomplete="off" is a very good idea for passwords. But for many other inputs (generally generic inputs that a user uses often on different websites/forms, such as emails), it reduces usability.

• Try to use standard names to increase readability and so that autocomplete will work (what even is an email_id? email would fit better).

• autocomplete="on" is the default, so you don't really need to specify it (it clutters up your code and makes it harder to read).

• Your indentation is inconsistent (2 vs 4 vs 8 spaces, and datalist is indented even more).

• You should not use linebreaks to change the look of the page. That's what CSS is for (I know it's easier to just place




, and I do it too sometimes, but it would be cleaner to do it via CSS).


Can regex patterns be avoided?

Not for the password, but for the email, it can be avoided. As the problem statements says, use HTML5 email validation (it works automatically for type email, no need for a pattern; and your pattern is way too strict, disallowing a lot of valid email addresses).

StackExchange Code Review Q#114976, answer score: 7