Error: AngularJS form validation is not working properly

I've been following the AngularJS documentation, but I'm having trouble with my validations. The error messages are not showing up and the minimum length restrictions for the form fields are not working:

<form name="callbackForm" ng-submit="requestCallback()"> 
  <div class="col-md-3">
    <input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
  </div>
  <div class="col-md-3">
    <input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
  </div>
  <div class="col-md-3">
    <input type="submit" class="btn btn-sm btn-block" value="Call Me!">
  </div>
  <div class="col-md-3">
    <p ng-show="callbackForm.name.$error.required" class="help-block">Your name is required.</p>
    <p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
  </div>
</form>

This is my controller:

'use strict';
app.controller('footerController', ['$scope', '$http', function ($scope, $http) {

    $scope.requestCallback = function () {

        alert("form callback");

    };
}]);

But for some reason, my error messages won't display and the ng-minlength validation isn't preventing form submission. What could be causing this issue?

Answer №1

It appears that your code is functioning correctly.

If you encounter submission restrictions on error, you must explicitly utilize Angular's validation feature by implementing something like this:

<form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">

Below is a snippet:

function Ctrl($scope) {
  $scope.requestCallback = function() {
    alert("form callback");
  };
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>

<div ng-app>
  <div ng-controller="Ctrl">
    <form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">
      <div class="col-md-3">
        <input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required="" />
      </div>
      <div class="col-md-3">
        <input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required="" />
      </div>
      <div class="col-md-3">
        <input type="submit" class="btn btn-sm btn-block" value="Call Me!">
      </div>
      <div class="col-md-3">
        <p ng-show="callbackForm.name.$error.required" style="font-size: 14px; color:#ff0033" >Your name is required.</p>
        <p ng-show="callbackForm.name.$error.minlength" style="font-size: 14px; color:#ff0033" >Your name should have at least 3 letters</p>
        <p ng-show="callbackForm.telephone.$error.required" style="font-size: 14px; color:#ff0033" >Your telephone number is required.</p>
        <p ng-show="callbackForm.telephone.$error.minlength" style="font-size: 14px; color:#ff0033" >Your telephone number should have at least 11 numbers.</p>
      </div>
    </form>
  </div>
</div>

Answer №2

Form validation is in progress. To utilize the requestCallback() function, ensure that your form is connected to the controller.

Enclose your form within a controller using ng-controller

<div ng-controller="footerController">

<form name="callbackForm" ng-submit="requestCallback()"> 
                <div class="col-md-3">
                    <input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
                </div>
                <div class="col-md-3">
                    <input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
                </div>
                <div class="col-md-3">
                    <input type="submit" class="btn btn-sm btn-block" value="Call Me!">
                </div>
                <div class="col-md-3">
                    <p ng-show="callbackForm.name.$error.required"  || callbackForm.name.$error.minlength class="help-block">Your name is required.</p>
                    <p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
                </div>
            </form>

</div>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refrain from revealing AngularJS code before activating it

My AngularJS code displays every time I reload the page Issue: The code appears even when my internet connection is slow or the page does not fully reload. I only want it to display the result. I would appreciate any suggestions for a solution. Thank you ...

What is the best way to control the class name of elements using jQuery in an MVC4 application?

Among the <li> elements, one of them contains the class "current". Determining which <li> is the current one. View below: @{ int k = 10; //the value changes with each request } <ul class="car"> @foreach (var item in modelCoun ...

How can you retrieve the value of a CSS file in Javascript and CSS?

Imagine there is an element with the class .selector. This class defines its style. Once the page has finished loading, some JavaScript code is executed - the specifics are not important. What matters is that the CSS properties have set the object's ...

The issue with AngularJS multiple $http requests failing to fetch accurate data

I'm having issues with my AngularJS controller and service modules. I want to refresh custController.allCustomers after adding a new customer so that the UI displays the new data. However, when I call custController.createCustomer, the new customer do ...

I am encountering an issue where the object I am sending with Next.js is appearing as undefined on the receiving page

When transferring data from my question screen to a result screen, I am using an object called footprintsData. Here is the code snippet for sending the data: const footprintsData = { carFootprint: roundedCarFootprint, electricityFootprint: roundedElect ...

Remove a row from a Jquery Jtable

I am running into difficulties when trying to delete rows, and I suspect that the issue might be related to the post[id] not being properly sent. Although the delete message appears, the row is not actually deleted. Below is the snippet of my code: JAVASC ...

Incorporating a delay into looped HTTP requests while effectively utilizing Promise.all to track their completion

Greetings! In my current project, I am trying to introduce a 50ms delay before each subsequent HTTP request is sent to the server. Additionally, I aim to incorporate a functionality that triggers after all requests have been successfully made. To better e ...

Issue encountered while retrieving values from JSON for the data table

I recently developed an application using a combination of React and Flask to display JSON data in a table format. While I can successfully see the data loaded in the console, I encountered difficulties in rendering it within the data table. The technologi ...

The code is running just fine when tested locally, but it seems to encounter an issue when accessed remotely, yielding

Currently, I am in the process of developing a dual twin setup using a Raspberry Pi. The goal is to simulate a continuous transmission of body temperature data, which is then sent to a server that stores the information in a MongoDB database. Everything fu ...

Modifying SVG gradients with JavaScript

My goal is to modify the stop color of a gradient displayed in an SVG element. I've been trying to adjust the stop-color attribute, but so far, my attempts have not been successful: <svg><defs> <linearGradient gradientTransform="rotat ...

Unexpected JSON token error occurs in jQuery when valid input is provided

I encountered an error that I'm struggling to pinpoint. The issue seems to be related to the presence of the ' symbol in the JSON data. After thoroughly checking, I am positive that the PHP function json_encode is not responsible for adding this ...

Using Javascript to establish a connection with a Joomla MySQL database

Recently, I was tasked with building a website in Joomla that utilizes a MySQL database. As part of this project, I am required to develop a JavaScript function that connects to the MySQL database. Do you have any advice or tips for me? ...

Centered iframe within a div

I am trying to center my iframe within a white box and need some assistance with this. I want the iframe to be in the middle of the white box rather than its current position at the moment. game1.html: <html> <head> <title>R ...

The PHP sorted array loses its order when encoded into JSON and then sorted in JavaScript

In my PHP code, I have two arrays that I need to work with. The first array is sorted using the arsort() function like this: arsort($array1); After sorting, I output the contents of both arrays like so: foreach ($array1 as $key => $val) { $output ...

Are HTML's Regular Expressions the Equivalent of JavaScript's Regular Expressions?

I have been trying to utilize the pattern="" attribute in HTML to implement regex, but unfortunately, I am unable to locate a comprehensive list of HTML regex parameters. This has led me to ponder whether the syntax for regex in HTML is similar to JavaSc ...

Combining Multiple Tables Using Knex SQL Joins and Storing the Result in an Array

At the moment, I'm utilizing Knex to carry out queries on a MSSQL database. In my schema, there is a table named "Meals" which has the following columns: Id Additionally, there is also a table named "Vegetables" with the following columns: Id Meal ...

Delete the tag that comes before

Is there a specific tag like: <p id="name" onclick="javascript:var ele=context(this);">sumtext here</p><br> <p id="name" onclick="javascript:var ele=context(this);">newtext here</p><br> <script ...

Storing information in an array based on a specific flag

Currently, I am developing an Angular application where I am dealing with a specific array that contains a flag named "checked". Based on the value of this flag, I need to perform certain manipulations. Here is a snippet of my sample data: const data = [{ ...

Upon the initial data retrieval, everything seems to be working fine. However, when the user transitions to chatting with another user, the state value does not reset and instead shows a combination

Exploring the world of react.js and node.js, I am currently working on developing a chatting application with the integration of socket.io. The issue I'm facing is that when a user clicks on another user to chat, the previous chat messages are display ...

What is the best way to create a React text box that exclusively accepts numeric values or remains empty, and automatically displays the number keypad on mobile devices?

While there are numerous similar questions on StackOverflow, none of them fully address all of my requirements in a single solution. Any assistance would be greatly appreciated. The Issue at Hand Within my React application, I am in need of a text box tha ...