至少选择了一个select-option的表单验证

form validation for at least on select-option is selected

本文关键字：select-option 一个 表单 验证 选择      更新时间：2023-09-26

我的表单布局类似如下:

<form action='' method="post" id='myform'>
    <select name='select1'>
        <option value=''>select option</select>
        <option value='a'> a </option>
        <option value='b'> b </option>
        <option value='c'> c </option>
    </select>
    <select name='select2'>
    <option value=''>select option</select>
    <option value='e'> e </option>
    <option value='f'> f </option>
    <option value='g'> g </option>
</select>
    <select name='select3'>
        <option value=''>select option</select>
        <option value='h'> h </option>
        <option value='i'> i </option>
        <option value='j'> j </option>
    </select>
</form>
<script> $('#myform').validate(); </script>

注意:我已经包括了jquery.js和jquery.validate.js文件。

这里有3个选择选项。我只需要验证至少一个select-option 

function selectValidate() {
    var check = false;
    $.each($('select'), function(index, data) {
         if (data.val() !== ''){
              check = true;
         }
    });
    return check;
}

创建自己的验证器方法:

$.validator.addMethod("selectNone",  function(value, element) {if (element.value == " ") {return false;} else {return true};} ),

，然后添加rules:

yourSelectID1: {required:true, selectNone:true},
yourSelectID2: {required:true, selectNone:true},
yourSelectID3: {required:true, selectNone:true},

你的html代码有一个错误。你应该把每个<option value=''>select option</select>都改成这个<option value=''>select option</option>。所以你的html应该是这样的:(我添加了提交按钮来显示功能)

jsFiddle Live Demo

<form action='' method="post" id='myform' >
 <select name='select1' >
<option value=''>select option</option>
<option value='a'> a </option>
<option value='b'> b </option>
<option value='c'> c </option>
</select>
 <select name='select2' >
<option value=''>select option</option>
<option value='e'> e </option>
<option value='f'> f </option>
<option value='g'> g </option>
</select>
 <select name='select3' >
<option value=''>select option</option>
<option value='h'> h </option>
<option value='i'> i </option>
<option value='j'> j </option>
</select>
<input type='submit' value='validate '>
</form>

主要功能是validateSelects()。
JS 

function validateSelects()
{
    var m = false;
    $.each($('select'),function()
    {
         if( $(this).val() != ''){  m=true; }
    });
    return(m);
}
// For the functionality.
$('#myform').on('submit',function()
{
    return validateSelects(); 
});
相关文章：