INPUT field with validation while typing

[klaaz]

Hello Alf,

I want to complement you on the great work you did with all the dhtml goodies at your site.

Besides the usefulness, I learned a lot about the way DHTML works!

Thank you for that!

Now the idea:
It is a simple idea, but not realy available yet. As you know there are several scrips available on the internet who are ment to be used as form validation scripts. But what I miss is a system who does validation while typing. Example: the field is empty, surrounded by a red border. While typing in a text field this border changes to silver after the requirements for that particular field are met. On the reverse, when you delete all the content in that particular field, the borders turn red again.

So you have to fll all the field following the requirements before it is possible to post the form (disabled post button).

It would be handy if a fieldtype could be chosen, if possible with a mask type (email, zip, phone etc).

And off course a simple way to connect this validation / mask function to a field, by example:
<input type="text" required="1" masktype="zip" name="" value="">

And an example with a free mask
<input type="text" required="1" freemask="####-99" name="" value="">
Where the # are string's and the 9 numbers.

There are some scripts who do the masking and validation, but they do this when posting the form. It would be nice if it does validation while typing. This must be possible while using onBlur en tracking keystrokes I presume??

I would try it when I could, but javascript drives me crazy sometimes! I am more a PHP kind a guy

[Batalf]

[klaaz]

[klaaz]

Hi Alf, I use this script manytimes by now, it shure is great!

There are a couple of things that could be better though, nothing is perfect

One of the things is the fact that in some cases I like to place some help text after the field. Like a date field: (dd-mm-yy). When I do so, this line of text is placed at the next line, while there is plenty of space after the field. This is done by the use of div's I think. Maybe it is interesting to create an extra tagspecification for this option:

ex.
<input type=text required=1 help=(dd-mm-yy) name=surname />

Then the script places this line of text AFTER the input field itself. It would be nice if there was a style option available to this line of text.

Another question:
When I use radio buttons, or somply want to put more input fields on one line, they are also placed on different lines. Again the DIV I think.

This is all ready solved by the alternative script you provided me with, where the div's are removed. But I told you all ready in an private message that this one does not validate at all...

Last:
When I use some fields without the required=1 option, they have a validation mark around them. I like to exclude this ones from the validation system. Best options: no reuired= at all then exlude them from the validation and style marks, required=0 include them with style marks, but not required.

I hope you find some time to look in to this one. This would make the script pretty perfect I think!

grtz,

Klaaz