0

I have a CSS code like this:

.input:required:invalid {
  border: 1px solid red;
}

My HTML for this input is like this:

<input class="input" type="text" required="required" />

From JS, I want to figure out if the browser supports or not CSS validations, on Chrome for Mac for example I'm getting an error message that says that I should fill the field and prevents the user from submitting the form, but on Mobile Safari it won't show anything and it will allow the user to submit the form.

Is this possible?, what other alternatives do I have?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Matias
  • 641
  • 5
  • 17
  • Duplicate of https://stackoverflow.com/q/8550642/604687 [solved] – Ninjakannon Mar 10 '15 at 21:25
  • @Ninjakannon thanks! I saw that post while I was looking for information regarding this, the thing is, that checkValidity is actually defined on Mobile Safari, I can though add an event to listen for the form's submit and preventDefault if checkValidity is false, but this on browsers that support form validations won't show the error message for the invalid inputs – Matias Mar 10 '15 at 22:04

1 Answers1

-1

As fas as I'm aware of there are no ways to validate form with CSS. I believe you are talking about HTML5 validation and adding the style with CSS for error messages or required fields?

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_required

Ohsik
  • 261
  • 3
  • 10
  • You are right, my title is wrong (I will correct it), and yes, this is exactly what I'm talking about – Matias Mar 10 '15 at 22:07
  • Check this out! http://stackoverflow.com/questions/8550642/check-if-a-browser-has-built-in-html5-form-validation – Ohsik Mar 10 '15 at 23:01