Angular JS form validation not working even the other forms work ok

Question

i'm working on a school project. My project has some forms that need to be validated. Login and register form validation work well but the other form used to upload item is not validated. I have tried to figure out the error but get no result.

Note that the function works ok, just the validation get error

I'm using AngularJS 1.4.5 along with Google Firebase

This is my registration HTML code:

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

And this is my item upload 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

Hye,
I tried to reproduce your scenario, and I am able to validate upload form.
Please have a look.

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

Thanks for trying to help me. I figure out the way to fix this issue but it's weird.

To get the form validation work I just need to change the form name

from

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

to

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

and correct the following in other input tags like:

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

However, it now get to other error.

This is my angular code:

$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

I push all of the data into Firebase then reset the input fields into blank with

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

But after hitting the submit button, although data is being pushed into Firebase and input fields reset to blank, this one show up

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

I want after hitting the submit button, the form will be reset without any error message

Answer 3

The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be validated when submitted