2

I'm trying to validate a form using Angular, the problem is that the form is inside a JqueryUI dialog and there is no submit button to validate angular against. How am I able to achieve this? For example disabling the button or do some validation after the button is pressed (how do I do it outside the scope)?

I created a Plunker with a demo

Index Page 

  <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
        }
      }
    });

});
4

1 回答 1

0

您可以做的是从 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>

在您的控制器中，您可以检查验证，例如

 $scope.submitform = function () {
    if ($scope.newUserForm.$valid) {
        alert('form is valid');
        //Write your form submission logic here
    }
}
于 2014-03-03T10:56:45.357 回答