Checkbox form validation jQuery

Question

I have a form where a user can select a list of events, each event has the start time as a classname. When the form is submitted, I need to check if the user has selected more than one event with the same starttime.

e.g. In Today if the user selected Event A and Event C, it would trigger the validation message.

<form>

<h3>Today</h3>

    <input type="checkbox" name="date" class="starttime-1730" value="A" />Event A
    <input type="checkbox" name="date" class="starttime-1600" value="B" />Event B
    <input type="checkbox" name="date" class="starttime-1730" value="C" />Event C
    <input type="checkbox" name="date" class="starttime-1630" value="D" />Event D


<h3>Tomorrow</h3> 

    <input type="checkbox" name="date" class="starttime-1830" value="A" />Event A
    <input type="checkbox" name="date" class="starttime-1830" value="B" />Event B
    <input type="checkbox" name="date" class="starttime-1930" value="C" />Event C
    <input type="checkbox" name="date" class="starttime-2030" value="D" />Event D

<input type="submit" name="submit" />

</form>

Marius · Accepted Answer · 2009-09-22 07:05:09Z

1

First of all, put the starttime in a data attribute, not a class (that is not what a class is for). For example:

<input type="checkbox" name="date" data-starttime="1730" value="A" />Event A

Next put the two days inside a fieldset, so you can check them with the same function:

<form id="form1">
<fieldset>
<caption>Today</caption>

    <input type="checkbox" name="date" data-starttime="1730" value="A" />Event A
    <input type="checkbox" name="date" data-starttime="1600" value="B" />Event B
    <input type="checkbox" name="date" data-starttime="1730" value="C" />Event C
    <input type="checkbox" name="date" data-starttime="1630" value="D" />Event D
</fieldset>
<fieldset>
<caption>Tomorrow</caption> 

    <input type="checkbox" name="date" data-starttime="1830" value="A" />Event A
    <input type="checkbox" name="date" data-starttime="1830" value="B" />Event B
    <input type="checkbox" name="date" data-starttime="1930" value="C" />Event C
    <input type="checkbox" name="date" data-starttime="2030" value="D" />Event D
</fieldset>
<input type="submit" name="submit" />
</form>

Here is the jQuery function for doing the matching. It has not been tested.

function submit(){
  $("#form1 fieldset").each(function(i){
    var hashmap = {};
    $("input:checked", $(i)).each(function(j){
      var mytime = $(j).data("starttime");
      if(hashmap[mytime] != undefined){
        //Collision, report it or something
      }else{
        hashmap[mytime] = 1;
      }
    });
  });
}

answered Sep 22, 2009 at 7:05

Marius

59.2k35 gold badges137 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Natrium Over a year ago

I'm with you to say that the hour should not be in the classname. But is it valid xhtml when you create your own attribute?

Marius Over a year ago

It's valid HTML5: ejohn.org/blog/html-5-data-attributes jQuery uses loads of it internally (look at a jQuery UI element with firebug and you'll see them).

Tom Over a year ago

Good idea about using the data element, I agree that it's better but unfortunately I cannot use HTML5.

Marius Over a year ago

Most browsers will accept the data attributes without complaining. The only complaint you will get is from a validator, and you shouldn't really listen to them all that much.

Collectives™ on Stack Overflow

Checkbox form validation jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related