Javascript 如何验证Bootstrap 3 angularJS表单？

我有一个表单，有一些输入类型文本、输入类型编号、复选框、单选、选择选项和提交按钮。 我想验证每个输入。如果未填写所需的输入，我希望显示一条消息

发生的事情如下： 对于我的第一次输入，当我没有选择收音机时，甚至当我选择时，都会显示此消息

<div class="form-group has-feedback">
    I am : <br>
    <label class="radio-inline">
        <input type="radio" ng-model="sex" name="sex" id="sex" value="femme"> <strong>Woman</strong>
    </label>
    <label class="radio-inline">
        <input type="radio" ng-model="sex" name="sex" id="sex" value="homme"> <strong>Man</strong>
    </label>

    <div ng-show="form.sex.$error.required">
        <p class="help-block">
            Sex is required
        </p>                        
    </div>
</div>

我是：

女人
男人

性是必需的

我错过了一些东西，其他人也一样。我不知道我错过了什么

其次，我想在输入出错时禁用submit按钮。这是行不通的。这是我的密码：

<button ng-click="sendMessage();" class="btn btn-success pull-center" ng-disabled="form.$invalid" type="submit">Let me know</button>

让我知道

您可以在上看到完整的代码。

---

感谢您的帮助首先，您的Plunk添加了一个错误。你在哪里用

ng-app="myApp" 

而不是

ng-app="owmuchApp".

你的验证很有效。我刚刚在单选按钮和。。。成功了

---

查看此工作状态

首先，您的插件添加了一个错误。你在哪里用

ng-app="myApp" 

而不是

ng-app="owmuchApp".

你的验证很有效。我刚刚在单选按钮和。。。成功了

---

查看此操作

您遇到了两个问题，首先是应用程序模块的名称错误， （

script.js

中的“owmuchApp”和

index.html

中的“myApp”），因此应用程序甚至没有加载

您需要通过以下方式设置单选按钮组的ng required字段：

<input type="radio" ng-model="sex" ng-required="!sex" name="sex" id="sex" value="femme"> Woman
<input type="radio" ng-model="sex" ng-required="!sex" name="sex" id="sex" value="homme"> Man

女人
人

这是有效的解决办法吗

更新

我忘了提到我在show消息中添加了一个新条件：

<div ng-show="form.sex.$dirty && form.sex.$invalid">
  <p ng-show="form.sex.$error.required" class="help-block">
    Sex is required
  </p>
</div>

性是必需的

---

仅当用户尝试提交表单时才会显示，否则在呈现表单时会立即显示消息。

您有两个问题，首先是应用程序模块的名称错误， （

script.js

中的“owmuchApp”和

index.html

中的“myApp”），因此应用程序甚至没有加载

您需要通过以下方式设置单选按钮组的ng required字段：

<input type="radio" ng-model="sex" ng-required="!sex" name="sex" id="sex" value="femme"> Woman
<input type="radio" ng-model="sex" ng-required="!sex" name="sex" id="sex" value="homme"> Man

女人
人

这是有效的解决办法吗

更新

我忘了提到我在show消息中添加了一个新条件：

<div ng-show="form.sex.$dirty && form.sex.$invalid">
  <p ng-show="form.sex.$error.required" class="help-block">
    Sex is required
  </p>
</div>

性是必需的

---

将仅在用户尝试提交表单时显示，否则，消息将在表单呈现后立即显示。

以下是更新后的消息

让我知道

对所有要验证的字段使用name属性

使用表单名称访问错误变量。在你的情况下，它是“我的形式”

您可以使用以下表达式禁用表单：

• myForm.$无效
• !！我的表格。$valid

在ng应用程序中，您的应用程序名称不正确。您提到了“myapp”，而在脚本文件中，它是“owmuchApp”。我在这两个地方都用过“owmuchApp”

---

这是更新的plunker

让我知道

对所有要验证的字段使用name属性

使用表单名称访问错误变量。在你的情况下，它是“我的形式”

您可以使用以下表达式禁用表单：

• myForm.$无效
• !！我的表格。$valid

在ng应用程序中，您的应用程序名称不正确。您提到了“myapp”，而在脚本文件中，它是“owmuchApp”。我在这两个地方都用过“owmuchApp”

---

指向plunker的链接丢失抱歉，我已使用真实链接更新了内容尝试指向plunker的链接丢失抱歉，我已使用真实链接更新了内容尝试确定我在script.js中更正了myApp。但是我试过你的扑克牌，当没有选择性爱时，信息不会出现。你提供了正确的plunker吗？是正确的，我只是更新了答案，我忘了提到我将消息设置为在提交表单时显示，否则错误消息总是显示OK i correct myApp in script.js。但是我试过你的扑克牌，当没有选择性爱时，信息不会出现。您提供了正确的plunker吗？是正确的，我只是更新了答案，我忘了提到我将消息设置为在提交表单时显示，否则错误消息总是显示谢谢您的回答。我还有一个问题。你知道如果我想把愿望加进去该怎么办吗。我想在用户选中运动、旅行或两者时验证表单（提交按钮）？@Pracede非常感谢。您可能需要一个对象数组来放置选定的值，还需要一个函数来验证该对象数组是否具有任何值。你可以点击这个链接：谢谢你的回答。我还有一个问题。你知道如果我想把愿望加进去该怎么办吗。我想在用户选中运动、旅行或两者时验证表单（提交按钮）？@Pracede非常感谢。您可能需要一个对象数组来放置选定的值，还需要一个函数来验证该对象数组是否具有任何值。您可以访问此链接：