如何根据 ASP.NET MVC 3 和 JQuery 中的单选按钮选择验证文本框？答案

【问题标题】：How to validate a text box based on radio button selection in ASP.NET MVC 3 and JQuery?如何根据 ASP.NET MVC 3 和 JQuery 中的单选按钮选择验证文本框？
【发布时间】：2012-03-26 13:46:25
【问题描述】：

我有一个带有值“是”和“否”的单选按钮。如果用户选择“是”，则文本框向下滑动。所以必须验证。如果用户点击“否”，文本框向上滑动，无需验证。

我尝试使用 ValidationMessageFor(model => model.TextBoxValue)，但我无法提交表单，即使文本框向上滑动，它也会验证文本框。

【问题讨论】：

标签： jquery asp.net asp.net-mvc-3 jquery-validate

【解决方案1】：

“JQuery.Validate”库可能是一个合理的解决方案。它将允许您根据某些条件验证您的字段。语法相当有表现力：

$("#SomeFormId form").validate({
                rules: {
                    "YourTextBoxId": {
                        required:  {
                            depends: function(element) {
                                return $("#YourCheckBoxId").is(":checked");
                            }
                        }
                    }

// Writing this is notepad, you'll have to look up the syntax if you choose this approach.

【讨论】：

【解决方案2】：

添加一个隐藏字段来跟踪文本框是否显示。在验证之前检查该字段。

您甚至可以使用 javascript 查看 textbox.style.display == 'hidden' 并从中运行验证函数。

希望这会有所帮助。

【讨论】：

你能解释一下吗，用一些代码。这将非常有帮助。
如果您可以发布一些代码，我也可以帮助您更轻松。假设您的验证函数也在 javascript 中，您可以在执行服务器端调用之前运行 2 个 javascript 函数。类似 onclick="function1(); function2();"如果 function1 返回 false，则 function2 将不会运行。所以在function1中，检查你的文本框是否显示为：textbox.style.visibility或textbox.style.display。如果可见，请在函数 2 中验证。希望这现在更清楚了。如果有帮助，我也很感激投票。请发布更多代码，以便我提供帮助。

【解决方案3】：

我假设您正在使用 jquery 上下滑动 textbox。另一种方法是在您向上或向下滑动 textbox 的 disabled 属性时使用 jQuery 切换它。禁用的元素不会提交到服务器。

编辑：我会说在滑出textbox 的代码之后或之前，您会执行以下操作

<<when showing the textbox
$("#textbox-id").attr('disabled', false);

<<when hiding the textbox
$("#textbox-id").attr('disabled', true);

这将禁止用户以任何方式使用该textbox，包括将其提交到服务器，因此服务器不会看到其中可能包含的任何值。

edit2：刚刚记住，您还需要在提交表单时检查checkbox 的值。如果选中，请检查textbox，如果没有则不要。

【讨论】：

我是 JQuery 新手。我只知道 JQuery UI 中的上滑和下滑功能。你可以发布一些链接或代码来看看“禁用”是如何工作的吗？
我已经用一些代码编辑了我的回复。您必须将 textbox-id 部分更改为您的 textbox 的 ID。当textbox 滑入或滑出时，这将与正在执行的任何其他代码内联。

【解决方案4】：

据我了解，您想检查单选按钮的状态，相应地显示/隐藏文本框。显示时需要验证，隐藏时不需要验证。

我建议在渲染时启用验证。现在根据选择，显示/隐藏文本框，将以下代码放入 $(document).ready()

// 选择单选按钮 var radioBtn = $('#radioBtn1'); var initialState = radioBtn.is(':checked'); //隐藏/显示 var textbox = $('#txtBox1')[initialState ? '显示隐藏']（）; // 根据单选按钮选择显示/隐藏 radioBtn.click（函数（）{ 文本框[初始状态？ '显示隐藏']（）; }); }

希望这会有所帮助，问候

【讨论】：