Fork me on GitHub

25 Mar 2011

Styling with HTML5 form validation

HTML5 specifies a number of enhancements to form inputs that are gradually being implemented by newer browsers. Among the enhancements is support for some level of automatic form validation. When inputs have invalid values the browser may refuse to submit the form. Currently Opera, Safari, Chrome and Firefox 4 have some support for this. IE8 does not. I haven’t experimented with IE9 yet.

Let’s look at an example. A simple registration form has inputs for the name, email and website of a prospective user. Of these name and email are required. The input elements are as follows:

<input type="text" name="name" required>
<input type="email" name="email" required>
<input type="url" name="website">

The required attribute is new in HTML5 as are the input types email and url. All of these have implications for validation. Additionally the new input types, whilst they appear just like regular text inputs in desktop browsers are great for mobile users as they are given optimised virtual keyboard layouts.

CSS3 has :invalid, :required and :optional pseudo-classes that are supported by current versions of Firefox, Chrome, Safari and Opera. Some browsers also refuse to submit the form if a required field is not filled in or invalid values are entered in url or email type fields. Obviously without appropriate feedback this could be a pretty disastrous user experience and thankfully even the Webkit browsers which until recently were blocking form submission without feedback are now handling things better.

  • Firefox 4, Opera 11.01 and Chrome 10.0.648.204 all block form submission if there is an empty required field or invalid value and display a message next to the first such field.
  • Safari 5.0.4 will apply :invalid CSS rules but allows the form to be submitted.

Applying styles to invalid fields is pretty easy. For example to highlight invalid fields with a red border and background:

input {
    border: 1px solid #ccc;
}

input:invalid {
    background: #fff3f3;
    border-color: #f66;
}

You can also combine the :invalid pseudo-class in combination with others. For example to highlight focused fields with a fancy CSS3 box-shadow:

input:focus {
    border-color: #99f;
    outline: none;
     -moz-box-shadow: 0 0 0.25em #99f; 
  -webkit-box-shadow: 0 0 0.25em #99f; 
          box-shadow: 0 0 0.25em #99f; 
}

input:focus:invalid {
     -moz-box-shadow: 0 0 0.25em #f66; 
  -webkit-box-shadow: 0 0 0.25em #f66; 
          box-shadow: 0 0 0.25em #f66;
}

It’s worth noting that Firefox 4 automatically adds a red box-shadow to invalid fields (and not just focused ones). To turn it off you can specify:

input:invalid {
    -moz-box-shadow: none;
}

Of course, the browsers that display messages when they refuse to submit a form do so with different text and different visual effects so creating a consistent cross-browser look and feel with both client and server side validation messages is going to be an interesting challenge.

55 comments:

Unknown said...

Thank you for another wonferdul article. Where else could anyone get that kind of information in such an ideal way of writing? I have a presentation next week, and I am on the look for such information.
cool math games| coolmathgames| cool math| math games| cool math a-z| coolmath games
b cubed| b-cubed| barbie games| friv 4 school| friv4school

Anna Schafer said...

When the mouse moves over your link, you need to change the cursor to a "hand" and when the mouse clicks on your link you need to make the browser go to that page. psd to css

Unknown said...

This is also a very good post which I really enjoyed reading. Please visit our website and play exciting games:
slither io | wings io | wingsio | Science Kombat | Science Kombat Game
Play the fabolous earn to die game and complete all the levels.You can play all the seven parts of the game on our website :
Tank trouble | Tank trouble 2 | Tank trouble 3 | Tank trouble 4

Unknown said...

This content is written very well. Your use of formatting when making your points makes your observations very clear and easy to understand. Thank you.
- usps tracking
- iphone 7 release date
- excel

ngocanh said...

Your blog posts are more interesting and impressive. I think there are many people like and visit it regularly, including me.I actually appreciate your own position and I will be sure to come back here.
facebook entrar l entrar facebook l entrar no facebook l entrar facebook direto l entrar facebook agora

agario games said...

So beautiful! I believe my wife would be happy to own such beautiful dresses when walking, or my daughter would be very proud to wear them go out with her friends!
happy wheels

我愛你 said...




العاب بنات : استمتع بوقتك بهذه المجموعة من العاب بنات
، بما في ذلك العاب المكياج واللباس العاب متعددة و متنوعة لتنال اعجابك في هذا القسم من العاب بنات على موقع العاب بيل لهذا قسم ألعاب بنات يمكنك إيجاد كل أنواع الألعاب التي تبحثين عنها أنت وصديقاتك، لهذا فما عليك إلا الضغط على اللعبة التي تريدين لعبها ومشاركة الألعاب التي يبحث عنها صديقاتك وإرشادهم لموقعنا وابدءوا في الاستمتاع بأفضل العاب فلاش بنات وايضا يوجد لدينا تشكيلة اكثر من رائعة من العاب تلبيس بنات 2017

Unknown said...

This article is really fantastic and thanks for sharing the valuable post.

sushi-cat2.com

Anonymous said...

I was very impressed by this post, this site has always been pleasant news. Thank you very much for such an interesting post. Keep working, great job! In my free time, I like play game: imgtaram. What about you?

Unknown said...

I like to get up early to go out and breathe fresh air. I feel that it is good for health and a good habit
19216811ll.com

ngocanhng said...

Alot of blogs I see these days don't really provide anything that I'm interested in, but I'm most definately interested in this one. Just thought that I would post and let you know. Nice! thank you so much! Thank you for sharing.
b612az.com

Unknown said...

Pakistani colleges deliver extremely difficult tests, at this time, medical meetings and tests. Difficult testing at different colleges is difficult. Additionally, there is an outlet plan. NTS is a Pakistan-based organization that manages school tests for companies in country and higher education Pakistan link. There are more colleges that go beyond the NAT test. The NTS has its own NAT team and their source to evaluate the travel of Pakistan Partner Colleges. Equipment, to NTS; will be discontinued from all NTS colleges. Many students now vote on the NAT NTS to be tested at the Colleges.


شركه تنظيف said...

شركة ترميم بالرياض
شركة كشف تسربات المياه بالرياض
رش مبيدات بالرياض
شركة عزل مائي بالرياض
شركة عزل خزانات بالرياض
شركة نقل اثاث بالرياض
شركة عزل فوم بالدمام

Safe Milli said...

Thanks it such a very nice post. i will definitely share it with colleagues. I just stumbled upon your weblog from Google and wished to mention that I've truly loved browsing your
blog posts. In any case I'll be subscribing to your rss feed and
I'm hoping to read more of your great articles!

Download Psiphon 3 latest version,
Get here some cheap Gucci iPhone Cases for iPhone 7, iPhone X, iPhone 8 Plus,
Want to start a new business? see this insanely easy Marketing Research to get started,
Here are some best Marketing Strategies to boost your business in 2019,
Beautiful Happy new year images,
Latest MTN Night Browsing Codes, And charges,
A true story about Shopping Habits
. see more....

nandhu said...


imo install
imo beta
imo messenger
imo online
IMO is a simple video chat app for Android which is great for making free video and voice calls.

پرستو said...

کیف پول چرم
کرم ضد آفتاب

Anonymous said...

http://lampungservice.com
https://jskursus.blogspot.com/<
https://jasaeditfotobandarlampung.blogspot.com/https://sevicecenterhimax.blogspot.com/
https://servicecentermito.blogspot.com/https://jskursus.blogspot.com/https://kursusservicehplampung.blogspot.com/https://servishppringsewu.blogspot.com/https://panasoniclampung.blogspot.com/https://samsunglampung.blogspot.com/

Anonymous said...

youtubelampung.blogspot.com
bimbellampung.blogspot.com
bateraitanam.blogspot.com
lampungservice.com

jerrysproductreviews said...

I take pleasure in the useful information presented in your details.
I'll bookmark your web site and also examine once more right here often.
fortivacreditcard.com
fortivacreditcard

jacklinemelda said...

The first step in Medicine Essay Writing Services is the choice of topic. The topic that is chosen by the writer determines the quality of the paper.

leahmelda@gmail.com said...

Acquiring Academic Essay Writing Services from experienced writers provides you with more free time to focus on other tasks. The company have Custom Research Paper Writing Services who offer Non-Plagiarized Research Papers and are knowledgeable with Chicago, MLA, and APA style.

meldaresearch said...

Do you have an insight into the qualities took out for in a company offering excellent Article Review Papers Services? Asking for Article Review Writing Service is noble because it enhances your Review Article Writing Service performance.

Samantha Charles said...

Thank you very much for sharing such a useful article. Will definitely saved and revisit your site https://oneworldrental.com/laptop-rentals-usa

assignmentauthors said...

On the other hand, the youth and the educated in the society have a different perception of the internet seeing of how they will come to benefit from it as compared to the old and uneducated. assignment expert

abc said...

Excellent post shared love to read more https://www.couponfond.com

augustwalker said...

The most effective method to Install Canon Printer. Group makes a wide assortment of printers, each with its own specific highlights and advantages, for example, the capacity to filter records or send faxes. In spite of the contrasts between the different printer models, every Canon printer utilizes a similar establishment technique, which you should perform

Beauty Care By Abby said...

At Beauty Care By Abby, our aim is to offer the highest standards in skin care treatments. With 10 years of experience, our specialists are dedicated to recognizing each individual’s special needs, offering you professional help and advice.

Smart Research said...

It's important for students to get Sociology Essay Writing Services from a reputable Sociology Assignment Help Online provider for their Academic Essay Writing Services at lowest cost.

Danny James said...

Take a look at Best Indoor Playground Los Angeles For Kids to have fun and enjoyable with them.

Essay Writing Ace said...

Essay Writing Ace provides essay help to the students throughout their program. They assist students to retain and enhance their grades throughout the semester by offering them complete professional essay writing services.
They provide professional training sessions to the team based on their specialisations. Timely training of the staff helps the team to keep themselves updated for the writing standards and the specific formats for various assignments. They are fully equipped with the skills and are experienced in the relevant field of academic writing. They assure you of the 100% authenticity and the reliability of the writing. Timely deliverance and confidentiality of the document are 100% guaranteed.
To get the complete essay writing services with special discount offers and cheap prices, visit the website and place an order Online Essay Writing Services

SKIP HIRE SERVICES UK said...

Very informative and It was an awesome post. I love reading your fantastic content. Thanks for sharing it with us. We are so greatful to your sharing.

Skip Hire

Katherine Flintoff said...

Lahore Smart City is going to be the best choice for commercial, investment and residential point of view. The scheme will have everything to attract national and international investors. In return, investors will get high revenue. On the other hand, the housing society is equipped with state of the art facilities. The facilities are just dream of come true for the people of Lahore. Peace, safety and eco-friendly behaviors Future Development Holding hires and corporate’s with world-class developers, architectures and planners. This Smart City Lahore will have golf clubs and fields designed by experienced and world-recognized designers.

Hosthook Official said...

Are you looking for Cheap Hosting Services Provider Company? Do not worry because Hosthook is one of the leading and famous Web Hosting Services Provider Company in the World. So what are you waiting for just visit our website and choose your ideal package.

essay help zone said...

Hello everyone!
I am glad to share some knowledgeable and informative articles for those people who are studying and want to increase their knowledge. Here are some topics that help you to improve your knowledge.
Here are some valuable articles below,
How Professional Essay Writing Services Can Help Students
How To Cope-Up With Essay Writing Challenges
How to Get Away from Plagiarism Throughout Essay Writing
Procedures To Select Professional Essay Writers
Top 5 Reasons Of Why Active Reading Is So Necessary For Students
Top 7 Essay Writing Skills That Students Must Have
Why Academic Essay Writing is So Necessary for Students


Read these articles, and increase your knowledge. If you realize, these articles are informative, so you should share these articles with your friends, colleagues, and classmate. Thanks

Deal and Delas said...

3.5 Marla Plots in Lahore Park View City Orchard Block:
park view lahore location
park view lahore installment plan
Rudn Enclave payment plan
Blue world city Islamabad map

Maha Nazir said...

The service that Imarah Marketing offers is the best out there. There are no hidden fees and we were in complete contact throughout the entire process. I We would definitely recommend Imarah real estate Marketing to others looking to buy a property in Islamabad Pakistan
https://imarahmarketing.com/
https://imarahmarketing.com/blue-world-city/

jasonbob said...

golden goose outlet
kyrie 7 shoes
curry 8
supreme new york
bape clothing
moncler
yeezy boost 350
giannis shoes
chrome hearts outlet
kd shoes

Unknown said...

In all our years of buying property we never had the pleasure of working with a Imarah real estate marketing professional as thorough and reliable as them!
https://imarahmarketing.com/
https://imarahmarketing.com/blue-world-city/

Imarah Real Estate Marketing said...

Pleasure working with https://imarahmarketing.com/blue-world-city/

Maha Nazir said...

Imarah Marketing was awesome. Can’t say enough good things about them. Our agent helped us navigate the process in a smooth way and helped us sort out any issues that we faced. https://imarahmarketing.com/
https://imarahmarketing.com/park-view-city-islamabad/https://imarahmarketing.com/nova-city/
https://imarahmarketing.com/blue-world-city/

Imarah Real Estate Marketing said...

https://imarahmarketing.com/https://imarahmarketing.com/blue-world-city/

amna said...

Many thanks for your kind and efficient service for booking a plot in park view city and blue world city.I will definitely recommend Imarah real estate services to others in the future.
https://imarahmarketing.com/
https://imarahmarketing.com/blue-world-city/
https://imarahmarketing.com/park-view-city-islamabad/

Tooba said...

Imarah Marketing PVT LTD is the best marketing platform I've ever worked with. They had innovative ideas that not only improved the company's brand but also made it exciting to promote.
I can't say enough about what a great experience I've had with Imarah Marketing PVT LTD and I'll definitely be recommending them to all of the people that I can.
https://imarahmarketing.com/

yanmaneee said...

lebron 17 shoes
yeezy 380
supreme clothing
nike off white
golden goose
supreme clothing
lebron james shoes
hermes birkin
golden goose
jordan 13

Umair said...

delta international recruiting agency in pakistan

makeenmarketing1 said...

Thank you for this article; I'm writing to let you all know about Nova City Islamabad, a real estate project that can generate exceptional returns. Click on the link to get the most bang for your cash.

Unknown said...

This blog is very informative. Thanks for sharing such unique content. Please keep it up.
Skip Hire in Birmingham
Skip Hire Sheffield
Skip Hire Liverpool
Nottimgham Skip Hire
Skip Hire in Leeds
Skip Hire Bristol
Skip Hire Manchester
Skip Hire Glasgow

ahrealestatemarketing said...

Thanks for the great post on your blog, it really gives me an insight on this topic. Here you can find more information Amazing information is given here. Thanks for sharing the post and keep it up.
Blue World City Booking Office Islamabad

Regency Marketing said...

Amazing and Helpful post. I really appreciated your work. Many thanks for your kind and efficient service for booking a plot in Park View City Islamabad , Capital Smart City and Blue world city Islamabad .I will definitely recommend Regency Marketing real estate services to others in the future.

lily jake said...

Your words of interest in this article almost match my own thoughts. This article is really

commendable. I liked this post very much. Thank you very much for sharing such posts.

Skip Hire Leicester

Embroidery Digigtizer said...

This article is very informatoive love to read your articles in futue.
Best investment in islamabad express mall and residency

MariaNazir said...

Grey Bricks Marketing is one of Pakistan’s most reputed realtor companies offering diversified properties at the most premium locations in the country. We provide the largest selection of residential and commercial properties on feasible and easy installment plans.
Established by like-minded professionals, we are now a team of certified and specialized consultants who stand ready to serve all your property needs. With an emphasis on ethical practices and world-class service standards, we are on our way to becoming the leading name in the industry.
We aim to connect Pakistan real estate to buyers and investors not only locally but also internationally. Through our innovative and diversified approach, we make finding any property in Pakistan easier than ever before from anywhere in the world.
With an abundant database of the most secluded and elite properties, market trends, and community information, we connect buyers & sellers to the latest and best properties so they can generate maximum returns on their investments.

MariaNazir said...

Blue world city is one of the modern and futuristic housing societies in the premises of. The Master plan includes a lot of plots, from residential to commercial, NOC Approved Society. 24-7. Blue World City (BWC) is one of the most exquisite yet inexpensive housing developments. It is the real estate sector’s crown jewel, one that the investors prize above all else. The residential society is close to the Federal Capital, situated on Chakri Road. Therefore, let us help you get your dream house in one of the most prestigious housing societies of the modern day.

MariaNazir said...

Kingdom Valley is a wonderful and emerging project, approved by Naya Pakistan Housing & Development Authority (NAPDA) & Punjab Government (NOC Approved). We bring to you a modern, inventive and inexpensive housing project that goes by the name of Kingdom Valley Islamabad. It contains a strategy of providing comfort and luxury at an unbelievably reasonable cost. Its design conveys a sense of security, tranquility, and forward-thinking.

sleigh said...

find more infocheck this link right here now have a peek at these guysnavigate to this site More about the authorher latest blog