Question

我有一个表单，其中有多个滑雪学费选择框，所有这些都默认为0.如果用户提交表单时所有选择框都为0，我希望表单验证失败。我可能错过了一些明显的东西，但我正在努力找到一种方法来解决这个问题。

<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>

我正在使用jquery验证器插件，我在许多其他形式上使用得很好，但在所有这些情况下，我一直在验证一个字段，并且从未出现过一个字段的验证依赖的情况关于他人的价值。

因此，总而言之，如果所有字段的值都为0，则表单必须无效。

谢谢！

PS我没有包含jquery代码，因为除了标准的验证器东西之外什么都没有显示

Answer 1

您需要使用.addMethod()方法创建自定义规则。

$.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
        }
    }
});

请参阅：http://jqueryvalidation.org/jQuery.validator.addMethod/

演示：http://jsfiddle.net/as22v/

重要：

您还有无效的HTML，这完全打破了您的表单。您有<form>个代码作为<table>代码的直接子代。您只能将<tr>等特定标记作为<table>的直接后代。由于这个错误，无论有多少表单错误，您的表单总是会传递jQuery验证。

您必须将<form>代码移到<table>之外，如此...

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

替代解决方案：

如果您可以将第一个<option>项目设为value=''而不是value="0"，则可以使用the additional-methods.js file中包含的require_from_group方法。使用此方法，您可以指定填写组中的至少一个<select>（由class指定）。

HTML代码段：

<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/

Answer 2

您应该在每个选择元素中选择默认选项，之后您可以在提交表单事件上附加事件处理程序并检查每个元素，然后如果所有选择值都为零，阻止表单到sumbit，所以jQuery代码看起来像：

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... }); });

更新：对于使用jQuery validate()插件，您的代码如下所示：

$("#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(); } } });

注意：不要忘记 您应该在每个选择元素中选择默认选项。

Jquery Validator插件 - 检查多个字段

2 个答案: