0

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

4

2 回答 2

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"，你可以使用文件require_from_group中包含的additional-methods.js方法。使用此方法，您可以指定至少<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"
        }
    });

});

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

于 2013-09-09T14:56:35.917 回答
0

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

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

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

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

于 2013-09-09T11:14:06.570 回答