[whatwg] [WF2] <select required>

[Joao Eiras]

Well, the option element could be extended with a new attribute 'invalid'  
which hold prevent that option to be selected.

Robert <mail at robbiegee.com> escreveu:

> On Mon, 02 Oct 2006 16:35:32 +0200, Simon Pieters <zcorpan at hotmail.com>  
> wrote:
>
>> I've seen a case where a <select> is used and the user is required to  
>> change its value, as in:
>>
>>    <select name="test" required>
>>     <option value="">Select one:
>>     <option>Foo
>>     <option>Bar
>>    </select>
>>
>> Now this can be done with radio buttons instead, but why can't the  
>> above be supported? That is, make required apply to <select>s and if  
>> the value is empty then required is not satisfied. (Same for <select  
>> multiple>.)
>
>
> Submitting an empty value may be wanted, and since a select by  
> definition is a list of predefined valid values, it would make little  
> sense to prevent the user from selecting some of them. However, I agree  
> with the use case of the invalid starter value so users must consciously  
> select a value they wanted instead of the default one.
>
> The following script will do exactly what you wanted, although Opera  
> doesn't seem to use the custom error message for some reason. I'm not  
> sure if that's my fault or Opera's due to my lack of experience with  
> WF2, but it does prevent form submissions just fine as long as there are  
> invalid selects.
>
> The script works in Opera 9.02.
>
> <script type="text/javascript"><![CDATA[
> function checkSelect(e){
>     var test = e.target;
>     if(e.target.value == '')
>        e.target.setCustomValidity('You must select a value.');
>     else
>        e.target.setCustomValidity(null);
> }
>
> // Use '//select' for html documents, or use a wrapper function
> // that strips namespace prefixes for plain 'ol html.
> var res = document.evaluate('//html:select',document,
>     function(pfx){return 'http://www.w3.org/1999/xhtml';},4,null);
> var elem=null;
> while(elem = res.iterateNext()){
>     if(!elem)break;
>     checkSelect({'target':elem}); // do initial check
>     elem.addEventListener('change',checkSelect,false);
> }
> ]]></script>
>
>
> --
> Robert Græsdal