使用jquery根据下拉选择来验证textarea [英] validate textarea depending on dropdown selection using jquery

问题描述

我正在使用JQuery Validation插件( http://jqueryvalidation.org )来验证html表单.我希望仅当下拉菜单选择值为0时才需要textarea字段.任何帮助都将非常有用.预先感谢！

这是表格的样子:

<form name="reviewProduct" id="reviewProduct" method="POST">
    <select id="reaction" name="reaction">
    <option value="1">Yes. I like it.</option>
    <option value="0">No. I don't like it.</option>
    </select>
    <textarea id="explainwhy" name="explainwhy" rows="4"></textarea>
</form>

<script>    
$(document).ready(function () {
$('#reviewProduct').validate({
    rules: {
        explainwhy: {
            required: {
                depends: function () {
                    return $('#reaction').val() == "0";
                }
            }
        }
    }
});
});
</script>

解决方案

使用depends方法使required规则取决于"一组条件.

$(document).ready(function () {

    $('#reviewProduct').validate({
        rules: {
            explainwhy: {
                required: {
                    depends: function () {
                        return $('#reaction').val() == "0";
                    }
                }
            },
            reaction: {
                required: true
            }
        }
    });

});

演示: http://jsfiddle.net/SSA4Y/

I'm using JQuery Validation plugin (http://jqueryvalidation.org) to validate an html form. I would like the textarea field to be required only if the dropdown menu selection value is 0. Any help would be great. Thanks in advance!

Here's what the form looks like:

<form name="reviewProduct" id="reviewProduct" method="POST">
    <select id="reaction" name="reaction">
    <option value="1">Yes. I like it.</option>
    <option value="0">No. I don't like it.</option>
    </select>
    <textarea id="explainwhy" name="explainwhy" rows="4"></textarea>
</form>

<script>    
$(document).ready(function () {
$('#reviewProduct').validate({
    rules: {
        explainwhy: {
            required: {
                depends: function () {
                    return $('#reaction').val() == "0";
                }
            }
        }
    }
});
});
</script>

解决方案

Use the depends method to make the required rule "depend" upon a set of conditions.

$(document).ready(function () {

    $('#reviewProduct').validate({
        rules: {
            explainwhy: {
                required: {
                    depends: function () {
                        return $('#reaction').val() == "0";
                    }
                }
            },
            reaction: {
                required: true
            }
        }
    });

});

DEMO: http://jsfiddle.net/SSA4Y/

这篇关于使用jquery根据下拉选择来验证textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！