HTML Forms Validation

HTML form validation can be performed automatically by the browser.

User Names
                                
                                            Username
                                        
                                            Twitter Username
                                        
                                            Facebook Username
                                        
                    HTML

<div class="input-field col s12">
    <input id="uname" name="uname" type="text" class="validate" required pattern="[a-zA-Z0-9]+" title="Only accept alpha-numeric characters">
    <label for="uname">Username</label>
</div>
<div class="input-field col s12">
    <input id="twitter-uname" name="twitter-uname" type="text" class="validate" required pattern="^[A-Za-z0-9_]{1,15}$" title="Accept maximum 15 character">
    <label for="twitter-uname">Twitter Username</label>
</div>
<div class="input-field col s12">
    <input id="facebook-uname" name="facebook-uname" type="text" class="validate" required pattern="^[a-z\d\.]{5,}$" title="Something is wrong">
    <label for="facebook-uname">Facebook Username</label>
</div>

Passwords
                                
                                            Password
                                        
 (UpperCase, LowerCase and Number)

                                            Password
                                        
 (UpperCase, LowerCase, Number/SpecialChar and min 8 Chars)

                    HTML

<div class="input-field col s12">
    <input id="password" name="password" type="password" class="validate" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" title="Must be contain UpperCase, LowerCase and Number">
    <label for="password">Password</label>
</div>

<div class="input-field col s12">
    <input id="password1" name="password1" type="password" class="validate" required pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" title="Must be contain UpperCase, LowerCase, Number/SpecialChar and min 8 Chars">
    <label for="password1">Password</label>
</div>

Credit Card Number
                                
                                            Credit Card Number
                                        
                    HTML

<div class="input-field col s12">
    <input id="card-number" name="card-number" type="text" class="validate" required pattern="[0-9]{13,16}" title="Please enter valid card number">
    <label for="card-number">Card Number</label>
</div>

Email
                                
                                            Enter Email
                                        
                    HTML

<div class="input-field col s12">
    <input id="email" name="email" type="email" class="validate" required>
    <label for="email">Enter Email</label>
</div>

Website
                                
                                            Website URL
                                        
                                            Enter Domain
                                        
                                            IPv4 Address
                                        
                                            IPv6 Address
                                        
                    HTML

<div class="input-field col s12">
    <input id="url" name="url" type="url" class="validate" required>
    <label for="url">Website URL</label>
</div>

<div class="input-field col s12">
    <input id="domain" name="domain" type="text" class="validate" required pattern="^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$" title="Enter Domain Name">
    <label for="domain">Enter Domain</label>
</div>

<div class="input-field col s12">
    <input id="ipv4-address" name="ipv4-address" type="text" class="validate" required pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" title="Enter valid IPv4 address">
    <label for="ipv4-address">IPv4 Address</label>
</div>

<div class="input-field col s12">
    <input id="ipv6-address" name="ipv6-address" type="text" class="validate" required pattern="((^|:)([0-9a-fA-F]{0,4})){1,8}$" title="Enter valid IPv6 address">
    <label for="ipv6-address">IPv6 Address</label>
</div>