Path: csiph.com!weretis.net!feeder4.news.weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: Give alert if form checkbox array is empty
Date: Wed, 20 Jan 2016 15:52:07 +0100
Organization: PointedEars Software (PES)
Lines: 113
Message-ID: <5888602.Nj0jmESFCg@PointedEars.de>
References: <d5vt9b95kifj8nb7phn75pl16tpijop14s@4ax.com> <f1e60$569f43fc$11450e97$16338@nntpswitch.blueworldhosting.com>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
X-Trace: solani.org 1453301529 32658 eJwNwoERwCAIA8CVRENsxqHU7D+Cvf9cDPYGk0j/8B4+WlyjPNQ69i7rC8DukKYmzIlM7qgLHDMQwQ== (20 Jan 2016 14:52:09 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Wed, 20 Jan 2016 14:52:09 +0000 (UTC)
User-Agent: KNode/4.14.2
X-User-ID: eJwNycEBwEAEBMCWsFlOOUfov4RkvkO4esfj9IfLVao0Fj33WGlaTWTo2bCCb9P4L/R6NkamGZ4jpTYvVuYDRWEVWw==
Cancel-Lock: sha1:jicm5jLphNI9ygACDGrRqDReegg=
X-NNTP-Posting-Host: eJwFwQkBwDAIA0BL5Qsgp6PEv4TdhUEw6Qh4MDhn7ruWzBlul1YrO1ny2S5C9BDxsme70/kDM7ARiw==
Xref: csiph.com comp.lang.javascript:29373

Cezary Tomczyk wrote:

> On 20/01/2016 03:28, Bunyip wrote:
>> <form enctype="multipart/form-data" method="post" action="index.html"

That does not strike me as a sensible “action” attribute value, so hopefully 
it is just an example.  The target resource should generate a confirmation 
or error message *server-side* so that it works even without client-side 
scripting.  And if it is server-side, then it is inefficient to have all 
“.html” resources be processed by the server-side applications.  Usually one 
would have something like “index.php” there, where the “.php” suffix in this 
example can be omitted if, as recommended, one uses content negotiation to 
avoid technology-specific suffixes.

<https://www.w3.org/QA/Tips/uri-choose>

>> name="artwork" onsubmit="return check_artwork_submit()">
>>
>> <input type="checkbox" name="subjectType[]" value="Abstract" />
>> Abstract<br />
>> <input type="checkbox" name="subjectType[]" value="Animal" />
>> Animal<br />

This should be a list of checkboxes instead (“ul” element), so that the 
labels are properly wrapped.  That also implies that you properly mark up 
checkbox labels with the “label” element as suggested by Cezary.  But, 
different to his suggestion, if the “label” element contains both the 
checkbox and the label text, no “for” and “id” attributes are necessary
on the child elements, respectively.

<https://www.w3.org/TR/html5/grouping-content.html#the-ul-element>
<https://www.w3.org/TR/html5/forms.html#the-label-element>

>> […]
>> <input type="submit" value="Add artwork" name="add_artwork">
>> </form>
>>
>> I need to check that at least one sunbjectType[] has been checked and,
>> if not, throw an alert.
> [...]
> 
> I would use document.querySelector method. Example:

I would not; it is inefficient incompatible overkill here.

> <form id="testForm" action="">
>    <input type="checkbox" id="Abstract" name="subjectType[]"
> value="Abstract" />
>  […]
> </form>
> 
> var formElement = document.getElementById('testForm');

So far, so good.
 
> function processSubmit(event) {
>    var isOneInputChecked = document.querySelector('#testForm
> input[name="subjectType[]"]:checked');

Here you are looking for the form element object that you have just found.

>    console.log(isOneInputChecked);
> 
>    if (isOneInputChecked) {
>      window.alert('You have checked at least one input');
>    }
> 
>    event.preventDefault();

There is no reason to *always* prevent the default submit action, and if you 
use the event-handler attribute as the OP did, you can simply return “false” 
instead (which is backwards-compatible).

> }

  function processSubmit (event)
  {
    /*
     * or .some(el => el.checked) in an ES 6 implementation
     * such as Google V8 JavaScript in Chromium 46.0.2490.71
     */
    var isOneInputChecked = 
      [].slice.call(formElement.elements["subjectType[]"])
        .some(function (el) { return el.checked; });

    if (isOneInputChecked) {
      window.alert('You have checked at least one input');
      event.preventDefault();
    }  
  }

If Array.prototype.slice() and Array.prototype.some() are not or cannot be 
made available, you can write the loop that the latter defines explicitly 
(this is a good example where a ”break” statement would be useful).

window.alert() should not be used here.  In general, it should be avoided in 
favor of displaying additional content in the form or marking controls that 
have been filled inappropriately.  Consider, for example that in 
Firefox/Iceweasel a window.alert() is modal; it blocks the entire tab and 
darkens its viewport.  Also, the icon that is commonly used, if any, does 
not match the user’s expectation of a purely informative message.
 
> formElement.addEventListener('submit', processSubmit);

It is not necessary to do this (which does not work in in IE < 9 and IE 9 in 
Compatibility Mode) if you specify the “onsubmit” attribute in the markup as 
the OP did.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.