提交時進行角度驗證

Question

我正在嘗試創建一個表單，如果您不填寫任何字段，則在您單擊“提交”時將顯示警報消息。 我正在嘗試使用角度驗證來實現這一目標； 但是，它根本不起作用。 這是我目前擁有的代碼：

（1）HTML事件表單文件

  function mainController($scope, $http) { $scope.formData = {}; $http.get('/api/events') .success(function(data) { $scope.events = data; initMap(data); for(i = 0; i < data.length; i++){ console.log(data[i].eventLocation); //placeMarker(data[i]); //test(data); } //placeMarker(data); }) .error(function(data) { console.log('Error: ' + data); }); // when submitting the add form, send the text to the node API $scope.createEvent = function() { $http.post('/api/events', $scope.formData) .success(function(data) { $scope.formData = {}; // clear the form so our user is ready to enter another $scope.events = data; console.log(data); }) .error(function(data) { console.log('Error: ' + data); }); } // ATTEMPT AT FORM VALIDATION $scope.validateForm = function() { if (document.getElementById("inputName").value == "" || document.getElementById("inputType").value == "" || document.getElementById("inputLocation").value == "" || document.getElementById("inputDetails").value == "") { alert("Please fill in all required fields!"); return false; } } };

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="col-lg-6"> <!-- Validate form --> <form name="myForm" onsubmit="return validateForm()"> <div class="form-group"> <label>Event Name</label> <input type="text" name="inputName" class="form-control" ng-model="formData.eventName" placeholder="Event name"> </div> <div class="form-group"> <label>Type</label> <select class="form-control" id="inputType" ng-model="formData.eventType"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> </div> <div class="form-group"> <label>Location</label> <select class="form-control" id="inputLocation" ng-model="formData.eventLocation"> <option>Location 1</option> <option>Location 2</option> <option>Location 3</option> </select> </div> <div class="form-group"> <label>Event Details</label> <textarea class="form-control" name="inputDetails" ng-model="formData.eventDetails" rows="2" placeholder="Add details about your event"></textarea> </div> <div class="text-center"> <button id="add-event"type="submit" class="btn btn-primary" ng-click="createEvent()">Submit</button> </div> </form>

Answer 1

用angularjs的方式。 https://scotch.io/tutorials/angularjs-form-validation

 angular.module('exApp', []) .controller('ctrl', ['$scope', function($scope) { $scope.save = function(invalid){ if(!invalid){console.log('Form Submitted');} } }]);

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body ng-app="exApp" ng-controller="ctrl"> <div> <form name="form" class="css-form" novalidate> <label>Name: <input type="text" ng-model="name" name="userName" required="" /> </label> <br /> <div ng-show="form.$submitted || form.userName.$touched"> <div ng-show="form.userName.$error.required">Tell us your name.</div> </div> <label>E-mail: <input type="email" ng-model="email" name="userEmail" required="" /> </label> <br /> <div ng-show="form.$submitted || form.userEmail.$touched"> <span ng-show="form.userEmail.$error.required">Tell us your email.</span> <span ng-show="form.userEmail.$error.email">This is not a valid email.</span> </div> Gender: <label><input type="radio" ng-model="gender" value="male" />male</label> <label><input type="radio" ng-model="gender" value="female" />female</label> <br /> <label> <input type="checkbox" ng-model="agree" name="userAgree" required="" /> I agree: </label> <input ng-show="agree" type="text" ng-model="agreeMe" required="" /> <br /> <div ng-show="form.$submitted || form.userAgree.$touched"> <div ng-show="!agree || !agreeMe">Please agree and sign.</div> </div> <input type="button" value="Reset" /> <input type="submit" value="Save" ng-disabled="form.$invalid || form.$pristine" ng-click="save(form.$invalid)" /> </form> </div>

Answer 2

您可以使用ng-submit進行表單驗證

<form name="myForm" ng-submit="validateForm()">

為了進行驗證，請使用ng-model變量來驗證表單

$scope.validateForm = function() { 
    if (!$scope.formData.eventName || !$scope.formData.eventType  ) {
      alert("Please fill in all required fields!");
      return false;

  }

演示版

Answer 3

使用表單時，Angular提供了一些幫助。 它為表單提供了不同的對象。 它們在驗證表單時非常有幫助：

$ pristine：如果用戶尚未與表單交互，則為true
$ dirty：如果用戶與表單進行了交互，則為true
$ valid：如果所有控件均有效，則為true
$ invalid：如果至少一個控件無效，則為true
$ error：它包含對所有無效控件的引用

您可以通過表單對象（在本例中為myForm）使用此對象。 因此，您可以使用以下命令檢查用戶是否填寫了任何字段：

$scope.validateForm = function(myForm) {
  if(myForm.$pristine) {
    alert("Please fill in all required fields!");
  }
}

Answer 4

嘗試這個：

使用myForm.$valid條件將ng-submit添加到您的元素中。
在提交按鈕上添加一個ng-click="submitted=true"事件，該事件將在單擊提交按鈕時觸發。
在所有輸入字段或必填字段中添加required屬性。

演示

 var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl', function($scope) { $scope.validateForm = function() { alert("submitting"); }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"> <form name="myForm" ng-submit="myForm.$valid && validateForm()" novalidate> <p ng-show="submitted==true && myForm.inputName.$invalid">Event name is missing.</p> <p ng-show="submitted==true && myForm.inputType.$invalid">Event type is missing.</p> <p ng-show="submitted==true && myForm.inputLocation.$invalid">Event Location is missing.</p> <p ng-show="submitted==true && myForm.inputDetails.$invalid">Event details is missing.</p> <div class="form-group"> <label>Event Name</label> <input type="text" name="inputName" class="form-control" ng-model="formData.eventName" required placeholder="Event name"> </div> <div class="form-group"> <label>Type</label> <select class="form-control" name="inputType" id="inputType" ng-model="formData.eventType" required> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> </div> <div class="form-group"> <label>Location</label> <select class="form-control" name="inputLocation" id="inputLocation" ng-model="formData.eventLocation" required> <option>Location 1</option> <option>Location 2</option> <option>Location 3</option> </select> </div> <div class="form-group"> <label>Event Details</label> <textarea class="form-control" name="inputDetails" ng-model="formData.eventDetails" rows="2" placeholder="Add details about your event" required></textarea> </div> <div class="text-center"> <button id="add-event"type="submit" class="btn btn-primary" ng-click="submitted=true">Submit</button> </div> </form> </div>

提交時進行角度驗證

問題描述

4 個解決方案

解決方案1
1 2017-04-18 07:13:17

解決方案2
1 已采納 2017-04-18 07:15:21

解決方案3
0 2017-04-18 07:15:25

解決方案4
0 2017-04-18 07:50:05

提交時進行角度驗證

問題描述

4 個解決方案

解決方案1 1 2017-04-18 07:13:17

解決方案2 1 已采納 2017-04-18 07:15:21

解決方案3 0 2017-04-18 07:15:25

解決方案4 0 2017-04-18 07:50:05

解決方案1
1 2017-04-18 07:13:17

解決方案2
1 已采納 2017-04-18 07:15:21

解決方案3
0 2017-04-18 07:15:25

解決方案4
0 2017-04-18 07:50:05