提交前表单输入检查
Form input check before submit
我有这个模态表单来获取用户的输入。在提交用户表单之前,我想检查用户是否输入了他们的用户名、名称、密码、确认密码、状态和范围。请注意,状态在单选按钮中,范围在复选框中。
但我现在遇到的问题是,用户仍然可以点击保存按钮,但它没有像我上面描述的那样检查条件。
<div class="modal-body">
<form name="addUser" ng-submit="(addUser.username.$valid && addUser.name.$valid && addUser.password.$valid &&
addUser.confirmpassword.$valid && addUser.status.$valid && addUser.scope.$valid) ? add() : '';">
<div class="alert alert-danger" ng-if="hasError">
<button type="button" class="close" aria-hidden="true" ng-click="setError(false);">×</button>
<strong>Error!</strong> {{errorMessage}}
</div>
<div class="form-group has-feedback" ng-class="addUser.username.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="username">Username</label>
<input class="form-control" name="username" ng-model="user.username" required>
<span class="glyphicon form-control-feedback" ng-class="addUser.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
<div class="form-group has-feedback" ng-class="addUser.name.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="name">Name</label>
<input class="form-control" name="name" ng-model="user.name" required>
<span class="glyphicon form-control-feedback" ng-class="addUser.name.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
<div class="form-group has-feedback" ng-class="addUser.password.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="password">Password</label>
<input type="password" class="form-control" name="password"
ng-model="user.password" required ng-minlength="5">
<span class="glyphicon form-control-feedback"
ng-class="addUser.password.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
<div class="form-group has-feedback" ng-class="addUser.confirmpassword.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="confirmpassword">Re-enter password</label>
<input type="confirmpassword" class="form-control" name="confirmpassword"
ng-model="user.confirmpassword" required ng-minlength="5">
<span class="glyphicon form-control-feedback"
ng-class="addUser.confirmpassword.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
<div class="form-group has-feedback" ng-class="addUser.status.$valid ? 'has-success' : 'has-error';">
<label for="status">Status</label><br>
<input type="radio" ng-model="user.status" name="status" value="1"> Active
<input type="radio" ng-model="user.status" name="status" value="0"> Inactive<br>
</div>
<br>
<div class="form-group has-feedback" ng-class="addUser.scope.$valid ? 'has-success' : 'has-error';">
<label for="scope">Scope</label><br>
<input type="checkbox" ng-model="user.scope.admin" name="scope[]" value="admin"> Admin <br>
<input type="checkbox" ng-model="user.scope.app" name="scope[]" value="app"> App <br>
<input type="checkbox" ng-model="user.scope.redemption" name="scope[]" value="redemption"> Redemption <br>
<br>
</div>
<div ng-switch on="isLoading">
<div ng-switch-when="true">
<button type="button" class="btn btn-primary btn-block disabled">Saving ...</button>
</div>
<div ng-switch-when="false">
<button type="submit" class="btn btn-primary btn-block" ng-click="add();" >Save</button>
</div>
</div>
</form>
</div>
尚未对此进行测试,但您的ng模型似乎为捕获的每个属性使用了一个对象"user",而您的ng提交条件没有考虑到这一点。不确定这是否是问题所在,但这是您可能想检查的一件事。
看起来你也可以做一些类似addUser的事情$有效,而不是进行全面检查。您还可以使用禁用提交按钮
ng disabled="addUser.$invalid"。
以下是教程:https://scotch.io/tutorials/angularjs-form-validation
相关文章:
- 使用onkeyup JS事件检查输入的值是否唯一
- 如何使用JQuery检查输入(电子邮件)字段是否包含特殊字符
- 检查输入是否未更改
- 获取检查输入无线电的标签
- 想要检查输入类型编号的值
- 在检查输入时切换标签分类 javascript
- 检查输入/文本区域中粘贴的文本是否存在无效的章程
- 如何检查输入框值在使用淘汰之前是否发生了更改
- 检查输入是否都是数字html javascript
- 我无法检查输入复选框元素
- 检查输入框的数组是否为空
- 如何检查输入type=“file”是否选择了文件
- 键入时检查输入中的重复数据
- 检查输入按钮
- 正则表达式,用于检查输入是否有字符或至少有1个笑脸
- 如何检查输入中的值以及值是否存在提交表单?jquery.
- jQuery - 检查输入字段是否保持不变
- 根据数组检查输入变量
- 如何检查输入框是否仅包含数字或逗号
- j查询验证插件,检查输入默认值