CODEWITHSUNDEEP
htmlcssinputcss-selectorspseudo-element
Joseph Khella
Joseph Khella

Reputation: 715

input:valid not working for input email

I know it seems dummy but I don't know why the :valid selector not working

I have this piece of code

HTML

<input type="email" class="form-control" id="inputEmail" placeholder="Email" value="[email protected]">

CSS

input:valid{
    border:1px solid green;
    background:red;
}


input:valid {
  border: 1px solid green;
  background: red;
}
<input type="email" class="form-control" id="inputEmail" placeholder="Email" value="[email protected]">

There's also a weird thing, it's working on the code snippet but not on JSFIDDLE, and how can I make if value="" to be invalid input?

Thank you,

Upvotes: 1

Views: 9522

Answers (3)

Umer Farooq
Umer Farooq

Reputation: 21

Include the required keyword in your HTML input element, if you do not include that it'll always be valid.

<input type="email" class="form-control" id="inputEmail" placeholder="Email" value="[email protected]" required>

Thank you.

Upvotes: 2

mntl_
mntl_

Reputation: 356

You can use 'required' to make the null value to be invalid input.

Edited the code to include the invalid selector.

http://jsfiddle.net/x4xfr68k/

<input type="email" class="form-control" id="inputEmail" placeholder="Email" value="[email protected]" required>

CSS

input:invalid{
      border:1px solid green;
      background:red;
 }

Upvotes: 0

Domain
Domain

Reputation: 11808

You can use following statement to declare email field.

<input type="email" placeholder="Enter your email " required>

Above statement will verify your email first.If verified successfully then form will be submit otherwise not.So you don't need to take extra effort for it.

Upvotes: 2

Related Questions