Jquery Validator Plugin - Check Multiple Fields

Question

I have a form which has multiple select boxes for ski tuition, all of which default to 0. I want the form to fail validation if ALL the select boxes are 0 when the user submits the form. I may have missed something obvious, but I am struggling to find a way to work this.

<table class="meetandgreet">
          <form id="tuition">
          <tr>
            <td class="col1">1:1 Tuition @ &pound;40 per hour</td>
            <td class="col2">
              <select name="one2one">
                <option value="0">0</option>
                <option value="1">1</option>      
                <option value="2">2</option>      
                <option value="3">3</option>      
                <option value="4">4</option>      
                <option value="5">5</option>      
                <option value="6">6</option>  
                <option value="7">7</option>  
                <option value="8">8</option>  
                <option value="9">9</option>
                                        </select>
            </td>
            <td class="col3">&pound;0</td>
          </tr>
          <tr>
            <td class="col1">1:2 Tuition @ &pound;55 per hour</td>
            <td class="col2">
              <select name="two2one">
                <option value="0">0</option>
                <option value="1">1</option>          
                <option value="2">2</option>      
                <option value="3">3</option>  
                <option value="4">4</option>  
                <option value="5">5</option>  
                <option value="6">6</option>      
                <option value="7">7</option>      
                <option value="8">8</option>      
                <option value="9">9</option>
                                        </select>
            </td>
            <td class="col3">&pound;0</td>
          </tr>
          <tr>
            <td class="col1">1:3 Tuition @ &pound;63 per hour</td>
            <td class="col2">
              <select name="three2one">
                <option value="0">0</option>  
                <option value="1">1</option>          
                <option value="2">2</option>          
                <option value="3">3</option>          
                <option value="4">4</option>      
                <option value="5">5</option>      
                <option value="6">6</option>  
                <option value="7">7</option>  
                <option value="8">8</option>  
                <option value="9">9</option>
                                        </select>
            </td>
            <td class="col3">&pound;0</td>
          </tr>
          <tr>
            <td class="col1">1:4 Tuition @ &pound;70 per hour</td>
            <td class="col2">
              <select name="four2one">
                <option value="0">0</option>
                <option value="1">1</option>      
                <option value="2">2</option>  
                <option value="3">3</option>  
                <option value="4">4</option>  
                <option value="5">5</option>      
                <option value="6">6</option>      
                <option value="7">7</option>      
                <option value="8">8</option>
                <option value="9">9</option>
                                        </select>
            </td>
            <td class="col3">&pound;0</td>
          </tr>
          <tr>
            <td class="col1">Full Day (5 hours, up to 4 people) @ &pound;250</td>
            <td class="col2">
              <select name="fullday">
                <option value="0">0</option>
                <option value="1">1</option>      
                <option value="2">2</option>  
                <option value="3">3</option>
                <option value="4">4</option>  
                <option value="5">5</option>  
                <option value="6">6</option>
                <option value="7">7</option>      
                <option value="8">8</option>  
                <option value="9">9</option>
                                        </select>
            </td>
            <td class="col3">&pound;0</td>
          </tr>
          <tr>
            <td class="col1">Full Week (5 hours x 5 days, up to 4 people) @ &pound;999</td>
            <td class="col2">
              <select name="fullweek">
                <option value="0">0</option>
                <option value="1">1</option>      
                <option value="2">2</option> 
                <option value="3">3</option>  
                <option value="4">4</option>
                <option value="5">5</option>  
                <option value="6">6</option>  
                <option value="7">7</option>  
                <option value="8">8</option>
                <option value="9">9</option>
                                        </select>
            </td>
            <td class="col3">&pound;0</td>
          </tr>
          <tr>
            <td></td>
            <td class="col2">Total:</td>
            <td class="col3">£<span>0</span></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td colspan="2"><input type="image" src="../Images/Buttons/adults_94x25_add_extras.png" style="margin-top:10px;" /></td>
          </tr>
          </form>
        </table>

I am using the jquery validator plugin, which I have used fine on many other forms, but in all of those cases I have been validating a field at a time, and never had a situation where the validation of one field is dependent on the value of others.

So, to summarise, the form needs to be invalid if all fields have a value of 0.

Thanks!

PS I've not included the jquery code as there's nothing really to show apart from the standard validator stuff

Quote: "PS I've not included the jquery code as there's nothing really to show apart from the standard validator stuff" ~ We won't just assume your "standard validator stuff" is automatically correct, so show the .validate() code anyway... this question will be more helpful to others that way. Besides, you said you can't get this to work... if you don't show your JavaScript, how are we supposed to know what you've already tried, and that you're not making any mistakes? — Sparky
– Sparky, Commented Sep 9, 2013 at 14:22
@Sparky, fair points and I apologise if by omitting this is not clear. What I meant was that I have the basic framework of the validator working, but I have not got a rule set for this scenario, so all I would have to show would be a pretty standard layout of the validator, but without any rules set, which I didn't think was worth including. — Robertomac
– Robertomac, Commented Sep 9, 2013 at 15:11
@Robertomac, then I'm assuming that you only have ('#tuition').validate(). However, maybe you don't... or maybe you do, but some other reader less experienced than myself might be left wondering. Please include it as it just makes the Q & A more complete. Thanks. — Sparky
– Sparky, Commented Sep 9, 2013 at 15:35

Sparky · Accepted Answer · 2013-09-09 15:28:41Z

1

You will need to create a custom rule using the .addMethod() method.

$.validator.addMethod("myRule", function(value, element) {
    // your validation function
    // return true for passed validation
    // return false for failed validation
}, "This is the error message");

$('#myform').validate({
    // rules, options & callbacks,
    rules: {
        myFieldName: {
            myRule: true
        }
    }
});

See: http://jqueryvalidation.org/jQuery.validator.addMethod/

Demo: http://jsfiddle.net/as22v/

IMPORTANT:

You also have invalid HTML which is totally breaking your form. You have <form> tags as direct children of <table> tags. You can only have certain tags like <tr> as direct descendants of <table>. As a result of this mistake, your form always passes jQuery Validation no matter how many form errors.

You must move your <form> tags outside of the <table> like so...

<form id="tuition">
     <table class="meetandgreet">
     ...
     </table>
</form>

Alternative solution:

If you can make your first <option> item have value='' instead of value="0", you can use the require_from_group method included in the additional-methods.js file. With this method, you can specify that at least one <select> from your group (designated by class) be filled out.

HTML snippet:

<select name="one2one" class="selectgroup">
    <option value="">0</option>
    ...

jQuery:

$(document).ready(function () {

    $('#tuition').validate({
        rules: {
            one2one: {
                require_from_group: [1, '.selectgroup']
            },
            two2one: {
                require_from_group: [1, '.selectgroup']
            },
            three2one: {
                require_from_group: [1, '.selectgroup']
            }
        },
        groups: { // group error messages into one
            myGroup: "one2one two2one three2one"
        }
    });

});

DEMO: http://jsfiddle.net/NNtAC/

edited Sep 9, 2013 at 15:28

answered Sep 9, 2013 at 14:56

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

3 Comments

Robertomac Over a year ago

thanks for your help. The require_from_group was the chosen option and is working like a dream.

Robertomac Over a year ago

By the way, for anyone else reading this, a momentary lapse in concentration with my html caused a lot of wasted time on this, so take careful note of Sparky's really helpful comment above regarding this. I'm sure most people won't make this mistake, but just in case...

Sparky Over a year ago

@Robertomac, you're welcome. Since you chose the require_from_group method, I edited my answer to include the code and demo.

01e · Accepted Answer · 2013-09-09 13:08:39Z

0

You should to have a default selected option in each select elements, after that you can attach an event handler on submit form event and check every elements,then if all of your select values is zero, prevent form to sumbit,so jQuery code looks like:

var form=$('#tuition');
form.on('submit',function(e){
    var one2one=$('select[name="one2one"]').val(),
        two2one=$('select[name="two2one"]').val(),
        three2one=$('select[name="three2one"]').val(),
        four2one=$('select[name="four2one"]').val(),
        fullday=$('select[name="fullday"]').val(),
        fullweek=$('select[name="fullweek"]').val();
    if(!(two2one || three2one || four2one || fullday || fullweek)) {
        e.preventDefault(); //Here the form is not valid!
    }
    //Here the form is valid, do anything here...
   });
});

UPDATE: For using jQuery validate() plugin your code looks like:

$("#tuition").validate({
    rules: {
        one2one: {
            required: true,
            min: '1' // minimum value of your one2one select element...
        },
        two2one: {
            required: true,
            min: '1' //the same as above...
        },
        three2one: {
            required: true,
            min: '1' //the same as above...
        },
        four2one: {
            required: true,
            min: '1' //the same as above...
        },
        fullday: {
            required: true,
            min: '1' //the same as above...
        },
        fullweek: {
            required: true,
            min: '1' //the same as above...
        },
    messages: {
        one2one: "This field must be at at least 1",
        two2one: "This field must be at at least 1",
        three2one: "This field must be at at least 1",
        four2one: "This field must be at at least 1",
        fullday: "This field must be at at least 1",
        fullweek: "This field must be at at least 1"
    },
    submitHandler: function(form) {
        form.submit();
    }
    }
  });

NOTE: don't forget You should to have a default selected option in each select elements.

edited Sep 9, 2013 at 13:08

answered Sep 9, 2013 at 11:14

01e

7013 silver badges14 bronze badges

2 Comments

Robertomac Over a year ago

Thanks for your reply. However, I'm using the validator plugin so need a solution that will work with that.

Robertomac Over a year ago

Thanks for the update. I've not tried it, but looking at that, does that not mean that each and every field needs to be at least 1? If so, it's not quite what I am after. I need the form to have at least one field with a value greater than 0. So of the six fields, five can be 0, but I need one to have a value greater than 0.

Collectives™ on Stack Overflow

Jquery Validator Plugin - Check Multiple Fields

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related