Breaking News: Grepper is joining You.com. Read the official announcement!

form validation with css

Add Answer

Marwen Labidi answered on May 24, 2022 Popularity 9/10 Helpfulness 3/10

answer form validation with css

related css validation

related html css form validation

form validation with css

Comment

// add requited attribute and pattern i html for mail : pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" 
for only text pattern="^[a-zA-Z]+$" ,

required //

input[type="email"]:valid,input[name="name"]:valid {
	border: solid 3px green;
}
input[type="email"]:invalid:focus,input[name="name"]:invalid:focus {
	border: solid 3px red;
}
or 
input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}





// regex for password

Minimum eight characters, at least one letter and one number:
"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"

Minimum eight characters, at least one letter, one number and one special character:
"^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$"

Minimum eight characters, at least one uppercase letter, one lowercase letter and one number:
"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"

Minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character:
"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"

Minimum eight and maximum 10 characters, at least one uppercase letter, one lowercase letter, one number and one special character:
"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,10}$"
9
regex passwordJavascript By DieOver on May 11 2020 DonateThankComment
^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})
Source:www.thepolyglotdeveloper.com
5
///// regex for user name 

# works in most newer browsers
^(?=.{8,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$
 └─────┬────┘└───┬──┘└─────┬─────┘└─────┬─────┘ └───┬───┘
       │         │         │            │           no _ or . at the end
       │         │         │            │
       │         │         │            allowed characters
       │         │         │
       │         │         no __ or _. or ._ or .. inside
       │         │
       │         no _ or . at the beginning
       │
       username is 8-20 characters long

# works in all browsers, but does the same as the above RegEx
^(?=[a-zA-Z0-9._]{8,20}$)(?!.*[_.]{2})[^_.].*[^_.]$

Popularity 9/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: css validation

Link to this answer
Share Copy Link

Contributed on May 24 2022

Marwen Labidi

0 Answers Avg Quality 2/10

Closely Related Answers

css validation

Comment

<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
        alt="Valid CSS!" />
    </a>
</p>

Popularity 10/10 Helpfulness 1/10 Language css

Source: jigsaw.w3.org

Tags: css

Link to this answer
Share Copy Link

Contributed on Jun 14 2022

Earth Hidden Beauty

0 Answers Avg Quality 2/10

html css form validation

Comment

<input
  required 
  type="text" 
  id="first_name"
  name="first_name">

Popularity 9/10 Helpfulness 1/10 Language css

Source: css-tricks.com

Tags: css html

Link to this answer
Share Copy Link

Contributed on Sep 11 2022

Mouri Roy

0 Answers Avg Quality 2/10

form validation with css

Contents

More Related Answers

form validation with css

Closely Related Answers

css validation

html css form validation

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.