Jquery Validator插件 - 检查多个字段

时间：2013-09-09 10:23:05

标签： jquery jquery-validate

我有一个表单，其中有多个滑雪学费选择框，所有这些都默认为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代码，因为除了标准的验证器东西之外什么都没有显示

2 个答案:

答案 0 :(得分：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/

答案 1 :(得分：0)

您应该在每个选择元素中选择默认选项，之后您可以在提交表单事件上附加事件处理程序并检查每个元素，然后如果所有选择值都为零，阻止表单到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();
    }
    }
  });

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

相关问题
最新问题