When A Form Should Start Validation?

Let’s take a look to this simple demo form:
http://www.richstyle.org/demo-form.html

I use the following code to style the validation issue:

input:required + output::after,
textarea:required + output::after { content: '*'; }

input:invalid + output::after,
textarea:invalid + output::after { content: '⨉';color: maroon }

input:valid + output::after,
textarea:valid + output::after { content: '✓';color: green }

The only thing looks unacceptable, is that the form validation process starts just when the form is loaded, whilst, it’s much better to start it in each input field independently, as user starts write something in it.

So, I thought of inventing a new attribute called “start-validation” with the following values:

form {
	start-validation: on-load | on-focus | on-type | on-blur | on-submit;
}

4 Responses to When A Form Should Start Validation?

  1. Ricardo Vercesi says:

    Hi there. This is my first input on this group. Hope to be the first of many. Anyway, regarding this issue, although it is a nice idea to have such a feature, I believe we should ask ourselves when and if should CSS start being about business logic and stop being about styling only.

  2. sandra hendrickson says:

    You are right about validation coding. I have seen you demo form through given page. It has not included validation but you can easily add them as you have suggested idea. I want to just include some normal information about validation as use validation of @ into email text box and particular require words into comment field.

    Here, you are going to include for validation into web designing with HTML5 so it needs custom coding but it also depends on website development platform. For example: ASP.net with visual studio 8 does not require custom coding but it just need to choose text box and select particular validation from properties.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Before you comment here, note that this forum is moderated and your IP address is sent to Akismet, the plugin we use to mitigate spam comments.