Having trouble getting my angular form validation to function properly

Even though I disabled Bootstrap's validation while using Angular, the validation for every input field still doesn't work. It seems like I have everything set up correctly.

My code looks like this below with no success on input validation:

<form novalidate name="new_people" ng-if="is_editting_newpeople" class="form-horizontal" role="form" ng-submit="save_new_people()">    
    <div class="input-group">
        <div class="input-group-addon">True Name</div>
        <input class="form-control" name="realname" type="text" ng-model="editting_people.realname" autofocus required>
    </div>

    <div class="input-group">
        <div class="input-group-addon">Nickname</div>
        <input type="text" name="nickname" class="form-control" id="nickname" ng-model="editting_people.nickname" required>
    </div>
    <div class="input-group">
        <div class="input-group-addon">Mobilenumber</div>
        <input type="text" class="form-control" id="mobile" name="mobilenumber" ng-model="editting_people.mobilenumber" required ng-minlength=11>
    </div>
    <div class="input-group">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default
                        dropdown-toggle" data-toggle="dropdown">{{ editting_people.idclass.name }}
                      <span class="caret"></span>
                    </button>
            <ul class="dropdown-menu">
                <li ng-repeat="id_class in IDCLASSES">
                    <a ng-click="set_id_class(id_class)">{{ id_class.name }}</a>
                </li>
            </ul>
        </div>
        <!-- /btn-group -->
        <input type="text" class="form-control" ng-model="editting_people.idnumber" required name="idnumber">
    </div>
    <!-- /input-group -->
    <br>
    <input class="btn btn-primary" type="submit" value="Submit" />
    <input class="btn btn-default" value="Cancel" type="button" ng-click="cancel_new_people()" />
</form>

Answer №1

Can you clarify what you mean by "input doesn't work"? It would be helpful if you could provide the code for the related controller so we can better understand the validation being done. If you have used novalidate, you may need to organize the validation in your Angular controller or HTML, like this:

<div ng-show="editting_people.realname.length<4">
Place any error message here.
</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

Learn how to retrieve data from the console and display it in HTML using Angular 4

Need help fetching data inside Angular4 HTML from ts variable. Currently only able to retrieve 2 data points outside the loop. Can anyone assist with pulling data inside Angular4? HTML: <tr *ngFor="let accept of accepts"> ...

JavaScript syntax issue: Required formal parameter not found

Can someone help me understand why this error message is showing up in the console for the code provided? I've followed the link indicated as the issue and it points to this specific line: " $('tr').each(function() { ". (I may have included ...

React JS: Component failing to render

My react component is not rendering and I can't find any bugs. The problem arises when I set the isLoggedIn state to "true", resulting in my HeroSlide not rendering If isLoggedin = false, then: If isLoggedIn = true, then: This is the code snippet: ...

Troubleshooting: The issue of Vue JS not successfully navigating between web

After countless attempts, I am still struggling to get my Firebase login function to appropriately switch the component upon signing in. I urgently need assistance with configuring my router to seamlessly transition to the next page once the sign-in proces ...

Exploring the equality of objects in NodeJS

Currently, we are in the process of creating tests for a program. Our goal is to develop a functional test that validates whether the output of the program aligns with certain expectations. The data returned from the program consists of a complex JavaScrip ...

Could not locate the express.js file

Currently in the process of learning express/node.js, but struggling to locate the page at localhost:3000/info You can view screenshots of my code below ...

Unexpected behavior observed with negated character: ? ^

I am looking to create a form where users can input their phone number and have the flexibility to choose how they want to separate the numbers. I have been using a regex pattern for validation: var regex = /[^0-9 \/-\\\(\)\+ ...

The Bootstrap modals seem to be invisible within the Rails application

Currently, I am integrating jquery into the devise views of a sample rails application. My intention is to test it on a sample app before implementing it in a production code. The controller and view for welcome are already set up. The routes.rb file loo ...

AngularJS: The `$locationChangeStart` event

I am attempting to check the next token in the next, but I am encountering an error: TypeError: next.localStorage is not a function APP.JS .run(function ($rootScope, $location,$log,User) { $rootScope.$on("$locationChangeStart", function (event,nex ...

How can I find the week of the month using Moment.js? (similar to Google Calendar)

Currently leveraging the fantastic features of Moment.js, I am facing a dilemma. How can I determine which week of the month a particular date falls into? The documentation for Moment js only seems to provide information on "week of year." For instance, if ...

Click-o-Meter: Tracking Button Presses

I’m looking to develop a button click counter that increases every time it is downloaded. I want to implement this functionality without using a database. Here's the code snippet: <?php $counterFile = 'path/to/counter.txt' ; ...

Tool designed to analyze the timing of sub requests and methods in Node for benchmarking purposes

For my benchmarking and load testing needs, I initially utilized tools such as Apache Bench, Siege, and benchmark.js. However, these tools only provided me with the overall result or time taken from start to finish of the test. I am now seeking a tool or l ...

Using Vue.js to implement dynamic table rowspan functionality

Has anyone experimented with implementing dynamic table rowspan in vue.js? Here is the sample data { date: '2018-08-14', temp_que : 120, }, { date: '2018-08-14', temp_que : 120, }, { date: '2018-08-15', ...

Tips for retaining focus on the same control following an asynchronous postback

I am experiencing an issue with my 3 textboxes, where one is placed in an update panel that refreshes every 4 seconds. Unfortunately, during the refresh process, the focus on controls outside of the update panel is being lost. I need a solution to maintain ...

The filter feature does not function properly when used with an ng-option generated from an array, but it performs effectively with static

<select ng-model="myOption" class= "form-control" ng-options="value.status for value in records | unique:'status'"> </select> Displays only one record when filtered with the criteria below <tr ng-repeat="data in records | filter: ...

Altering styles of a child component within a parent component using material-ui

I am trying to customize the appearance of a child component from within the parent component Let's take a look at the child component, MyButton.js: import ButtonComponent from '@material-ui/core/Button' const useStyles = makeStyle((theme) ...

Mean stack authentication issue: missing token

Overview: Currently, I'm in the process of developing an application that utilizes node/express for the backend, mongo as the database, and angular for the frontend. User authentication is handled through jsonwebtoken, where a token is stored in local ...

Customizing the look of a div using CSS within an AngularJS directive

I am facing an issue with a directive I created that is using ng-repeat on an array of objects ---Displaying the values on the GUI------ Now, my goal is to have the background color of a particular div change when clicked. I attempted the following: li ...

How can you prevent specific dates from being selected in an Angular Datepicker?

Is there a way to exclude Monday from the "mat-datepicker" component? I've tried implementing the following code in my class component: dateFilter = (_date: any) =>{ let day = _date.getDay(); console.log(day); return day != 1; ...

Tips for delaying the evaluation of an <input> field?

I am interested in analyzing the content of an <input> field when there is no activity from the user. One simple example I have considered is counting the number of characters, but the actual analysis process is very resource-intensive. To optimize ...