单选按钮选择验证

功放

我有一个带有2个输入和2个单选按钮的表格。当两个字段都填写并且选择了一个单选按钮时,表单有效。在这种情况下,我启用了提交按钮。问题是,即使未选择任何单选按钮,提交按钮也将变为启用状态

<form name="formAdd" novalidate ng-submit="sendForm()" class="basic-grey" ng-controller="SignUpController">
    <input id="antiForgeryToken" data-ng-model="antiForgeryToken" type="hidden" data-ng-init="antiForgeryToken='@GetAntiForgeryToken()'" />
    <div class="bg-danger validationErrors" ng-show="validationErrors">
        <ul>
            <li ng-repeat="error in validationErrors">{{error}}</li>
        </ul>
    </div>

    <div class="form-group">
        <label for="Email">Email</label>
        <input name="Email"
               type="text"
               class="form-control"
               placeholder="Enter email"
               ng-model="person.Email"
               ng-required="true"
               ng-minlength="3" />
    </div>
    <div class="form-group">
        <label for="UserName">User name</label>
        <input name="UserName"
               type="text"
               class="form-control"
               placeholder="Enter user name"
               ng-model="person.UserName"
               ng-required="true" />
    </div>
    <div class="form-group" style="height:30px;">
        <label for="Role">Your role</label>
            <label data-ng-repeat="choice in question.choices" name="Role">
                <input type="radio" name="response" data-ng-model="choice.isUserAnswer" data-ng-value="true" ng-required="true" />
                {{choice.text}}
            </label>
    </div>

    <a href="/" class="btn btn-default">Cancel</a>
    <button type="submit" ng-disabled="formAdd.$invalid" class="btn btn-primary">Save</button>
</form>

更新(添加了控制器)

var app = angular.module('signupvalidation', []);
app.controller('SignUpController', function ($scope, $http) {
    $scope.person = {};
    $scope.question = {
        questionText: "",
        choices: [{
            id: 1,
            text: "I'm an admin",
            isUserAnswer: "false"
        }, {
            id: 2,
            text: "I'm an user",
            isUserAnswer: "false"
        }]
    };
    $scope.sendForm = function () {
        $http({
            method: 'POST',
            url: 'api/accounts/create',
            data: $scope.person,
            headers: {
                'RequestVerificationToken': $scope.antiForgeryToken
            }
        }).success(function (data, status, headers, config) {
            $scope.message = '';
            if (data.success == false) {
                var str = '';
                for (var error in data.errors) {
                    str += data.errors[error] + '\n';
                }
                $scope.message = str;
            }
            else {
                $scope.message = 'Saved Successfully';
                $scope.person = {};
            }
        }).error(function (data, status, headers, config) {
            $scope.message = 'Unexpected Error';
        });
    };
});
除夕夜

请看下面的演示

<label for="Role">Your role</label>
            <label data-ng-repeat="choice in question.choices" name="Role">
                <input type="radio" name="response" data-ng-model="person.userType" data-ng-value="choice.value" ng-required="!person.userType" />
                {{choice.text}}
            </label>

var app = angular.module('app', []).
controller('HomeCtrl', function($scope) {


  $scope.question = {
    questionText: "",
    choices: [{
      id: 1,
      text: "I'm an admin",
      value: "admin"

    }, {
      id: 2,
      text: "I'm an user",
      value: "user"
    }]
  };




});
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body ng-controller="HomeCtrl">

  <form name="formAdd" novalidate ng-submit="sendForm()" class="basic-grey">
    <input id="antiForgeryToken" data-ng-model="antiForgeryToken" type="hidden" data-ng-init="antiForgeryToken='@GetAntiForgeryToken()'" />
    <div class="bg-danger validationErrors" ng-show="validationErrors">
      <ul>
        <li ng-repeat="error in validationErrors">{{error}}</li>
      </ul>
    </div>

    <div class="form-group">
      <label for="Email">Email</label>
      <input name="Email" type="text" class="form-control" placeholder="Enter email" ng-model="person.Email" ng-required="true" ng-minlength="3" />
    </div>
    <div class="form-group">
      <label for="UserName">User name</label>
      <input name="UserName" type="text" class="form-control" placeholder="Enter user name" ng-model="person.UserName" ng-required="true" />
    </div>
    <div class="form-group" style="height:30px;">
      <label for="Role">Your role</label>
      <label data-ng-repeat="choice in question.choices" name="Role">
        <input type="radio" name="response" data-ng-model="question.userType" data-ng-value="choice.value" ng-required="!question.userType" />{{choice.text}}
      </label>
    </div>

    <a href="/" class="btn btn-default">Cancel</a>
    <button type="submit" ng-disabled="formAdd.$invalid" class="btn btn-primary">Save</button>
    <pre>{{person | json}}
</form>

</body>
</html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如果选择了单选按钮,则设置验证Codeigniter

来自分类Dev

验证是否选择了单选按钮组JQUERY

来自分类Dev

JavaScript验证以检查是否选择了单选按钮?

来自分类Dev

重新验证单选按钮选择上的输入

来自分类Dev

使用Angular验证单选按钮的选择

来自分类Dev

HTML表单验证-基于单选按钮选择的条件

来自分类Dev

如果选择“是”单选按钮,则需要jQuery或JavaScript验证

来自分类Dev

使用Angular验证选择字段和单选按钮

来自分类Dev

已选择 PHP 验证单选按钮/调查答案

来自分类Dev

单选按钮验证

来自分类Dev

验证单选按钮AngularJS

来自分类Dev

离子单选按钮验证

来自分类Dev

如何验证单选按钮?

来自分类Dev

单选按钮验证Javascript

来自分类Dev

验证单选按钮

来自分类Dev

单选按钮状态验证

来自分类Dev

多个单选按钮验证

来自分类Dev

单选按钮的 JavaScript 验证

来自分类Dev

检查选择的单选按钮

来自分类Dev

无法选择单选按钮

来自分类Dev

单选按钮选择

来自分类Dev

选择单选按钮

来自分类Dev

JavaScript选择单选按钮

来自分类Dev

单选按钮选择

来自分类Dev

如何使用cfform内置验证来验证是否选择了单选按钮?

来自分类Dev

jquery 验证:以编程方式选择单选按钮不会隐藏验证消息

来自分类Dev

验证jQuery中的单选按钮

来自分类Dev

wpf单选按钮的验证规则

来自分类Dev

JSP中的单选按钮验证