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

Creating an AngularJS factory that integrates with a Parse.com database

Hey there, I've been diving into AngularJS factories to manage data outside of controllers but I'm hitting a roadblock. I could really use some guidance, advice, or direction on this issue. Here's what I have so far, but I'm struggling ...

Take the inputs, calculate the total by multiplying with the price, and then show

I'm in the process of developing a simple PHP form for an online t-shirt order system. Most aspects are running smoothly, but I'm facing issues with the final calculations. My goal is to combine the quantities based on sizes, multiply them by the ...

What is the process for adjusting the form transition?

I am currently working on a form that has a transition effect However, I encountered an issue: check out the problem here My goal is to keep the magnifying glass fixed in place while the form moves Here is a snippet of my code: import Search fro ...

Why does Res.send return an empty object when console.log indicates it is not empty?

I am currently facing a challenge while using the Google Sheets API with Express, as I have limited experience with JavaScript. My goal is to pass a JSON object from Express to React, but for some reason, when I send the object, it appears empty on the fro ...

Save information in a session using html and javascript

I'm having trouble accessing a session variable in my javascript code. I attempted to retrieve it directly but ran into issues. As an alternative, I tried storing the value in a hidden HTML input element, but I am unsure of how to properly do that wit ...

What is the process for obtaining the source code for children in React?

Can React extract the source code from children props? Imagine having a component with the following structure... <SomeComp> <Heading>I want to access this code inside the Heading tag</Heading> </SomeComp> How can I retrieve t ...

The use of custom loaders alongside ts-node allows for more flexibility

Is it possible to utilize ts-node with a custom loader? The documentation only mentions enabling esm compatibility. ts-node --esm my-file.ts I am attempting to implement a custom loader for testing an ESM module, but I prefer not to rely on node for compi ...

What is the method of displaying a querystring on my Angular view page without relying on a controller?

My experience lies in utilizing AngularJS 1. This excerpt showcases the stateprovider configuration present in my config.js file: JavaScript .state('projects', { abstract: true, url: "/projects", templateUrl: "views/common/master_pa ...

Create an interface that inherits from another in MUI

My custom interface for designing themes includes various properties such as colors, border radius, navbar settings, and typography styles. interface ThemeBase { colors: { [key: string]: Color; }; borderRadius: { base: string; mobile: st ...

Organizing JSON keys based on their values using Typescript

In the context of a main JSON structure represented below, I am interested in creating two separate JSONs based on the ID and Hobby values. x = [ {id: "1", hobby: "videogames"}, {id: "1", hobby: "chess"}, {id: "2", hobby: "chess ...

Having trouble transmitting JSON data with Durandal JS and Knockout Binding

var newData = { a: ko.observable(), b: ko.observable(), c: ko.observable(), d: ko.observable() }; function setupControlEvents() { $("#save").on("click", handleSave); } function handleSave() { var dataToSen ...

Firestore implementing batching for realtime updates with the onSnapshot 'IN' condition

Summary I'm currently working on developing a Chat List feature similar to those found in major social networks. However, I'm facing challenges with managing state in React Native due to a common issue with Firestore involving the use of onSnaps ...

Error encountered: X.setValue is not a valid function and cannot be used to set the value. However, manually inputting the value as a

When I try to use the line sseTopicString.setValue(sseValueNumber), a Type error is thrown: Uncaught TypeError: sseTopicString.setValue is not a function. Interestingly, if I output the value (string) of sseTopicString before the dot, everything works fin ...

Setting up eslint for your new react project---Would you like any further

I am currently working on a TypeScript-based React application. To start off, I used the following command to create my React app with TypeScript template: npx create-react-app test-app --template typescript It's worth noting that eslint comes pre-co ...

Using this.setState in ReactJS removes filters

Hey everyone, I've been struggling with a technical issue for the past few days and would really appreciate any hints or solutions. The problem lies in creating a table using the material-table library. Specifically, I need to extract the docID and do ...

Experimenting with jasmine testing on angularjs es6 factories

The file named classAModel.js contains the following code snippet: class classAModel{ constructor(model) { 'ngInject'; if (!model) return {}; this.id = model.id; this.name = model.name; this.displayName = model.displayName; } ...

"The Material UI date picker is encountering an issue with the error prop, which is being evaluated

I have developed a date picker that utilizes the Jalali calendar. While attempting to pass error checking using the error prop in the following code: <LocalizationProvider dateAdapter={AdapterJalali}> <MobileDatePicker label={lab ...

Attach an event listener to a class, then use the removeEventListener method to detach the listener and eliminate any remaining references, ensuring proper functionality of the

When creating a class in JavaScript, a normal function returns the class object. However, events return the event object and the class object is lost: function class(a){ this.name=a; document.addEventListener('click',this.click,false); xhr.add ...

Error: The JSON in app.js is invalid due to the unexpected token "C" at position 0

When I try to run this code snippet, I sometimes encounter an error message that says: SyntaxError: Unexpected token C in JSON at position 0. function fetchData(user_country) { fetch(`https://covid19-monitor-pro.p.rapidapi.com/coronavirus/cases_by_day ...

Why does my ForEach function in ReactJs automatically execute without being called?

I am creating a function with a ForEach loop that automatically executes and renders the screen without being called. My goal is to have the startGame function update the element at position [1] of the array to be 5 when I click on it. However, as soon as ...