涉及下拉依赖时，javascript中的表单验证

Posted 2023-05-09

【中文标题】涉及下拉依赖时，javascript中的表单验证

【英文标题】：Form validation in javascript when drop down dependency is involved

【发布时间】：2016-03-05 00:28:45

【问题描述】：

我已使用 ng-disabled 对 ADD 按钮进行表单验证。 即 ng-disabled="conditionForm.$invalid"。但是，我的表单包含两个最初隐藏的文本框，当从下拉列表中选择一个类型时，只有相应的文本框 div 应该是可见的。 The Problem i'm facing is ,when the above ng-disabled validation is used , the ADD button is still disabled when one of the text box is selected and an input is provided.从下拉菜单中也选择了第二个输入后，添加按钮将被启用。 能否请您提供一个替代验证，每次从下拉列表中选择一个值并提供有效输入时，都可以启用添加按钮。

【问题讨论】：

请向我们展示您的代码

【参考方案1】：

如果您的 ng-disabled 是在一个有效或无效的表单上，那么听起来那些可能已经设置了必需的输入。如果是这种情况，请查看使用 ng-required 以便您可以根据表达式显式设置 required 。然后，您可以控制表单何时有效。

The exact answer: <a href="http://jsfiddle.net/yuobrupr/2">Answer</a>

【讨论】：

ng-required 不起作用。它只保持 ADD 按钮处于启用状态。

以防万一不清楚 ng-required 不会出现在添加按钮上，但会出现在隐藏的文本区域

是的。但是，我在询问表单中添加按钮的验证。我在添加按钮启用/禁用情况下面临问题。当从下拉列表中选择第一个选项时，它的文本框出现并且我已经给它一个有效的输入。仍然添加按钮处于禁用状态。

这正是我最初的解决方案所做的。我通过为不同的文本区域添加标签来更新它，使其更清晰。希望这有助于jsfiddle.net/yuobrupr/1

抱歉，我看到了错误。我添加了一个最小长度，这应该可以防止它为空...jsfiddle.net/yuobrupr/2