gpt4 book ai didi

jquery - 使用 JqueryUI 对话框进行 AngularJS 表单验证

转载 作者:行者123 更新时间:2023-12-01 05:53:04 25 4
gpt4 key购买 nike

我正在尝试使用 Angular 验证表单,问题是该表单位于 JqueryUI 对话框内,并且没有用于验证 Angular 的提交按钮。我怎样才能实现这一目标?例如,禁用按钮或在按下按钮后进行一些验证(如何在范围之外执行此操作)?

我创建了一个Plunker带有演示

索引页

  <head>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script data-require="angular.js@*" data-semver="1.2.0-rc3" src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="dialog-form" title="Create new user" ng-controller="NewUserController">
<form name="newUserForm">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" ng-model="name" required/>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" ng-model="email" required/>
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" ng-model="password" required/>
</fieldset>
</form>
</div>

</body>

</html>

Javascript

function NewUserController($scope){

}

$(document).ready(function(){

$("#dialog-form").dialog({
autoOpen: true,
height: 400,
width: 350,
modal: true,
buttons: {
"Create an account": function() {
// Validation
}
}
});

});

最佳答案

您可以做的是从 JS 中的 DIALOG 调用中删除按钮代码,如下所示,

$("#dialog-form").dialog({
autoOpen: true,
height: 400,
width: 350,
modal: true,
});

使用 Jquery UI 对话框只是为了加载对话框。

在 HTML 中添加按钮代码,如

<div class="button">
<a name="submit" href="#" ng-click="submitform()" class=""></a>
</div>

在您的 Controller 中,您可以检查验证,例如

 $scope.submitform = function () {
if ($scope.newUserForm.$valid) {
alert('form is valid');
//Write your form submission logic here
}
}

关于jquery - 使用 JqueryUI 对话框进行 AngularJS 表单验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19386220/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com