Question

我正在做一个学校项目。我的项目有一些需要验证的表单。登录和注册表单验证工作正常，但用于上传项目的其他表单未经过验证。我试图找出错误但没有结果。

请注意，该功能正常，只是验证获取错误

我正在使用AngularJS 1.4.5和Google Firebase

这是我的注册HTML代码：

<form name="registerform" ng-submit="register()" novalidate>
      <div class="form-group">
        <p ng-show="message">{{message}}</p>
        <label>First name</label>
        <input type="text" name="firstname" class="form-control" placeholder="First name" ng-model="user.firstname" ng-required="true">
        <p class="text-danger" ng-show="registerform.firstname.$invalid && registerform.firstname.$touched">This field is required</p>
      </div>
      <div class="form-group">
        <label>Last name</label>
        <input type="text" name="lastname" class="form-control" placeholder="Last name" ng-model="user.lastname" ng-required="true">
        <p class="text-danger" ng-show="registerform.lastname.$invalid && registerform.lastname.$touched">This field is required</p>
      </div>
      <div class="form-group">
        <label>Email address</label>
        <input type="email" name="email" class="form-control" placeholder="Enter email" ng-model="user.email" ng-required="true">
        <p class="text-danger" ng-show="registerform.email.$invalid && registerform.email.$touched">Invalid email</p>
        <small class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" name="password" class="form-control" placeholder="Password" ng-model="user.password" ng-minlength="6" ng-required="true">
        <p class="text-danger" ng-show="registerform.password.$invalid && registerform.password.$touched">Password must have at least 6 characters</p>
      </div>
      <button type="submit" class="btn btn-success btn-block" ng-disabled="registerform.$invalid">Register</button><br>
      <a href="#/login" class="btn btn-primary btn-block">Already have an account? Login</a>
    </form>

这是我的项目上传表单：

<p ng-show="message">{{message}}</p>
  <form name="uploadItem" ng-submit="uploadItem()" novalidate>
    <div class="form-group">
      <label>Name</label>
      <input type="text" name="name" class="form-control" placeholder="Food name" ng-model="foodname" ng-required="true">
      <p class="text-danger" ng-show="uploadItem.name.$invalid && uploadItem.name.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>Category</label>
      <select class="form-control" name="category" ng-model="foodcategory" ng-required="true">
        <option value="">---Please select---</option>
        <option value="appetizer">Appetizer</option>
        <option value="maincourse">Main Course</option>
        <option value="dessert">Dessert</option>
        <option value="drinks">Drinks</option>
        <option value="bakery">Bakery</option>
      </select>
      <p class="text-danger" ng-show="uploadItem.category.$invalid && uploadItem.category.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>Image</label>
      <input type="text" name="image" class="form-control" placeholder="Food image" ng-model="foodimage" ng-required="true">
      <p class="text-danger" ng-show="uploadItem.image.$invalid && uploadItem.image.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>How to cook</label>
      <textarea class="form-control" rows="3" name="howtocook" placeholder="How to cook" ng-model="foodhowtocook" ng-required="true"></textarea>
      <p class="text-danger" ng-show="uploadItem.howtocook.$invalid && uploadItem.howtocook.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>Video</label>
      <input type="text" name="video" class="form-control" placeholder="Youtube embed link" ng-model="foodvideo" ng-required="true">
      <p class="text-danger" ng-show="uploadItem.video.$invalid && uploadItem.video.$touched">This field is required</p>
    </div>
    <button type="submit" class="btn btn-primary btn-block" ng-disabled="uploadItem.$invalid">Submit</button><br>
  </form>

Answer 1

novalidate属性是布尔属性。

如果存在，则指定在提交时不应验证表单数据（输入）

Answer 2

Hye，
我尝试重现您的方案，并且我能够验证upload form。
请看看。

<div ng-app="angularjs-starter" ng-controller="MainCtrl">
  <p ng-show="message">{{message}}</p>
  <form name="uploadItem" ng-submit="uploadItem()" novalidate>
    <div class="form-group">
      <label>Name</label>
      <input type="text" name="name" class="form-control" placeholder="Food name" ng-model="foodname" ng-required="true">
      <p class="text-danger" ng-show="uploadItem.name.$invalid && uploadItem.name.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>Category</label>
      <select class="form-control" name="category" ng-model="foodcategory" ng-required="true">
        <option value="">---Please select---</option>
        <option value="appetizer">Appetizer</option>
        <option value="maincourse">Main Course</option>
        <option value="dessert">Dessert</option>
        <option value="drinks">Drinks</option>
        <option value="bakery">Bakery</option>
      </select>
      <p class="text-danger" ng-show="uploadItem.category.$invalid && uploadItem.category.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>Image</label>
      <input type="text" name="image" class="form-control" placeholder="Food image" ng-model="foodimage" ng-required="true">
      <p class="text-danger" ng-show="uploadItem.image.$invalid && uploadItem.image.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>How to cook</label>
      <textarea class="form-control" rows="3" name="howtocook" placeholder="How to cook" ng-model="foodhowtocook" ng-required="true"></textarea>
      <p class="text-danger" ng-show="uploadItem.howtocook.$invalid && uploadItem.howtocook.$touched">This field is required</p>
    </div>
    <div class="form-group">
      <label>Video</label>
      <input type="text" name="video" class="form-control" placeholder="Youtube embed link" ng-model="foodvideo" ng-required="true">
      <p class="text-danger" ng-show="uploadItem.video.$invalid && uploadItem.video.$touched">This field is required</p>
    </div>
    <button type="submit" class="btn btn-primary btn-block" ng-disabled="uploadItem.$invalid">Submit</button><br>
  </form>
</div>

Answer 3

感谢您试图帮助我。我找到解决这个问题的方法，但这很奇怪。

要获得表单验证工作，我只需要更改表单名称

来自

<form name="uploadItem" ng-submit="uploadItem()" novalidate>

到

<form name="uploadForm" ng-submit="uploadItem()" novalidate>

并在其他输入标记中更正以下内容，例如：

<div class="form-group">
            <label>Name</label>
            <input type="text" name="name" class="form-control" placeholder="Food name" ng-model="foodname" ng-required="true">
            <p class="text-danger" ng-show="uploadForm.name.$invalid && uploadForm.name.$touched">This field is required</p>
          </div>

但是，现在又出现了其他错误。

这是我的角度代码：

$scope.uploadItem = function(){
        recipesInfo.$add({
          name: $scope.foodname,
          category: $scope.foodcategory,
          image: $scope.foodimage,
          howtocook:$scope.foodhowtocook,
          video:$scope.foodvideo,
          date: firebase.database.ServerValue.TIMESTAMP
        }).then(function(){
          $scope.foodname = '';
          $scope.foodimage = '';
          $scope.foodcategory = '';
          $scope.foodhowtocook = '';
          $scope.foodvideo = '';
          $scope.message = 'Success!';
        });//promise
      }//uploadItem

我将所有数据推送到Firebase，然后使用

将输入字段重置为空白

.then(function(){
          $scope.foodname = '';
          $scope.foodimage = '';
          $scope.foodcategory = '';
          $scope.foodhowtocook = '';
          $scope.foodvideo = '';
          $scope.message = 'Success!';
        });//promise

但是点击提交按钮后，虽然数据被推送到Firebase并且输入字段重置为空白，但这个显示

<p class="text-danger" ng-show="uploadForm.name.$invalid && uploadForm.name.$touched">This field is required</p>

我想点击提交按钮后，表单将被重置，没有任何错误消息

Angular JS表单验证即使其他表单也无法正常工作

3 个答案: