HTML5 Form Validation With the pattern (Regex) Attribute in html

  • 5 years-11 months

    HTML5 Form Validation With the pattern (Regex) Attribute in html

    • Category : html
    • Viewed : 67 times
    • Posted On :
    • Posted by : Vikas

    This is another Client Side Validation strategy No JavaScript or jQuery required, Thanks to HTML5 in light of the fact that approvals should now be possible utilizing HTML5 without coding of javascript or any server side dialect, utilizing HTML5 you can approve frames with design, Forms must be approve either utilizing customer side or server side since it causes you to gather redress information or substantial shape esteems from the clients, you can't trust clients aimlessly, how about we see it.

    pattern="[A-Za-z] " accepts only capital or small letters. 
    <label>Name : (letters only)*</label>
    <input type="text" pattern="[A-Za-z] " title="only letters" required />
    
    pattern="[a-z0-9._% -] @[a-z0-9.-] \.[a-z]{2,4}$" accepts valid email address 
    <label>E-mail : (xyz@zyx.com)*</label>
    <input type="email" pattern="[a-z0-9._% -] @[a-z0-9.-] \.[a-z]{2,4}$" title="xyz@something.com" required />
    
    pattern="https?://. " required title="https://dorcode.com" accepts valid web url starting with http://. 
    <label>website : (https://dorcode.com)*</label>
    <input type="url"  pattern="https?://. " title="https://dorcode.com" required />
    
    pattern="[0-9] " accepts only numbers 0, 1, 2.... 
    <label>pin code : (numbers only)</label>
    <input type="text" pattern="[0-9] " title="numbers only" required />
    
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" accepts one number one upper and lower case letters with 8 or more chars. 
    <label>password : (at least 6 chars)</label>
    <input type="password" pattern=".{6,}" title="Six or more characters" required />
    
    pattern="^\d{10}$" accepts only numeric values with 10 digit. 
    <label>phone no : (10 chars)</label>
    <input type="tel" pattern="^\d{10}$" title="10 numeric characters only" required />
    
    pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{5,12}$" accepts alphanumeric values letters and digits. 
     

Report this or Ask your own question

Your Answer

When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Let's work to help developers, not make them feel stupid.