araigon (4) [Avatar] Offline
#1
Hi,

I was trying to implement the example on how to use the property setCustomValidity of input elements mentioned in the section "3.8.1 Customizing the validation messages" but I may be missing something since when I submit the form without providing a value Chrome 12 does not complain (i.e. there is no message underneath the input field). I am trying to use the below code, can you please point me to the error I am making?

https://gist.github.com/1103051

Thanks,
Alejandro

Message was edited by:
araigon
robert.crowther (59) [Avatar] Offline
#2
Re: Doubt on Section 3.8.1 Customizing the validation messages

Hi Alejandro



Apologies for this - that code was originally written back when Opera was the only browser that supported the API and it doesn't now work in Firefox and Chrome (though it does still work in Opera). One of the reasons it doesn't work in Firefox and Chrome is that the validity is checked before the submit event is fired. This can be fixed by attaching to the invalid event instead: fldName.oninvalid



The other reason your example isn't working is that the field isn't actually invalid when you submit the form - put the required attribute on the input field to trigger it.



I've put a working example on jsfiddle for you to look at (this forum just makes a mess of the code, sorry), I'll update the code in the book the next time I'm working on that chapter - thanks for bringing it to my attention.



Rob

araigon (4) [Avatar] Offline
#3
Re: Doubt on Section 3.8.1 Customizing the validation messages
Thanks for your response Robert. It is much appreciated.

Kind regards,
Alejandro
dennis_s (2) [Avatar] Offline
#4
Re: Doubt on Section 3.8.1 Customizing the validation messages
HI;
I copied your script from the linked jsfiddle. My Safari Browser (vs. 6) still submits when the field is blank..
Yes I have included the attribute "required".

Now, It does work with my Chrome browser, but I happen to know many of the people who are going to use the site I am building use MacBook Pros.
So...
Any ideas?
robert.crowther (59) [Avatar] Offline
#5
Re: Doubt on Section 3.8.1 Customizing the validation messages

Apparently Safari has some issues with the <tt>required</tt> attribute which I wasn't aware of (more details here). I'll update the compatibility tables in the eBook version when it next gets revised.



Generally you should always validate on the server too, and provide JavaScript fallbacks for browsers without support.