在提交角度驗證

我想創建一個表單，如果你沒有填寫任何字段，如果你點擊提交，將會顯示一條警告消息。我正在嘗試使用角度驗證來實現此目的。然而，它根本不工作。下面是代碼我目前有：在提交角度驗證

（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>

來源

2017-04-18 user2990

使用filed.if你剛剛想對非空字段驗證..。檢查此https://codepen.io/sevilayha/pen/xFcdI。如何角度驗證工程.. –

看到我更新的答案。 –

你可以爲表單驗證

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

和驗證使用做到這一點使用ng-submitng-model變量來驗證表單

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

    }

Demo

來源

2017-04-18 07:15:21

如果您看到我的代碼，那正是我所做的，它不起作用。 – user2990

沒有你做的是使用javascript'onsubmit'方法調用範圍函數。這不會起作用 –

啊，我明白了。非常感謝！這工作完美！ – user2990

做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>

來源

2017-04-18 07:13:17

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

$質樸：true，如果用戶還沒有與形式交互尚未
$髒：真，如果用戶與表單交互
$有效：真正的，如果所有的控制是有效的
$無效：true，如果至少一個控制無效
$錯誤：它包含所有無效的控件的引用

您可以使用此對象通過窗體對象，在您的情況myForm。所以，你可以檢查用戶填寫使用任何領域：

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

來源

2017-04-18 07:15:25 Manuel

試試這個：

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

DEMO

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>

來源

2017-04-18 07:50:05

在提交角度驗證

回答

相關問題