What is the best way to set a date input as required with AngularJS?

Angular 1.2.23 is the version I am currently using, and I want to set an input field with type=date as required. Here is the code snippet I have:

<form name="form" novalidate>
    <input id="date" name="date" type="date" required />
    <span ng-show="form.date.$error.required">The date is required!</span>
</form>

Visit the plnkr link

I'm facing an issue where the span message is not appearing, any idea why?

In case input of type date is not supported in Angular 1.2.23, can you suggest a good alternative for validation purposes?

javascriptangularjs

Answer №1

To properly connect your input field to a value in your AngularJS scope, make sure to use the ngModel directive

Check out this updated Plunker for reference

http://plnkr.co/edit/fipUJZL294opqdlrY8gE?p=preview

<form name="inputForm" novalidate>
    <input id="username" name="username" type="text" ng-model="username" required />
    <span ng-show="inputForm.username.$error.required">Username is required!</span>
</form>

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

Unable to perform a POST request and send JSON data using AJAX with jQuery at the

It seems like there may be a server issue causing this problem, and unfortunately, I don't have access to our server to troubleshoot. I was hoping that someone else might have a solution or could help me understand the root cause of the issue. The is ...

phpjavascriptjqueryajax

Troubleshooting: MongoDB only updating the initial document

When I try to update the guild document using one of my commands, it only updates the top guild document instead of the specific guild it was sent in. Here's a picture to help illustrate the issue: https://i.sstatic.net/1VRza.png I am looking to upd ...

javascriptnode.jsmongodbmongoosediscord.js

Steps for making a Three.js 3D line collection with specified width and thickness

Is there a way to create a Three.js 3D line series with customizable width and thickness? Although the Three.js line object does have a linewidth attribute, it is not universally supported across all browsers and platforms in WebGL. Here is how you can s ...

javascriptthree.jsgeometrylines

What is the best way to utilize a REST API in AngularJS that will provide a

I have a REST API that returns either true or false. I tested the API in Postman and it successfully returns the expected values. Now, I need to integrate this service into an AngularJS application. However, when calling the service in AngularJS, it curr ...

angularjsngresource

What is the best way to set the first radio button as the default selection in Material UI?

The challenge I am facing involves a set of radio buttons representing dates from today to 30 days in the future. When a radio button is selected or active, it changes the background color. However, I would like the default selection to be the first radio ...

javascriptreactjsmaterial-ui

What is the most effective method for implementing popups and dialogs using JQuery?

I had previously created popups/dialogs, but have now encountered a regression error when trying to use them. I am looking to recode them using JQuery for the DIVs/popups/dialogs. Transitioning to JQuery would offer the advantage of enabling repositioning ...

javascriptjqueryhtmlcss

Display or conceal a vue-strap spinner within a parent or child component

To ensure the spinner appears before a component mounts and hides after an AJAX request is complete, I am utilizing the yuche/vue-strap spinner. This spinner is positioned in the parent days.vue template immediately preceding the cycles.vue template. The ...

javascriptvue.jsvuejs2

Vue js lacks the ability to effectively link HTML elements to corresponding JavaScript functions

I seem to be missing a crucial element in my spring boot application. I am attempting to follow the initial steps outlined in the Vue documentation to create the most basic Vue application possible. Here is what I currently have: @Controller public class ...

javascriptjavaspringvue.jsmodel-view-controller

Erase the destination pin on Google Maps

I am currently working on a project that involves displaying hit markers on google maps along with a route from start to finish. Although I have successfully displayed the route, I encountered an issue where both the origin and destination have identical ...

javascriptgoogle-mapstypescriptgoogle-maps-api-3google-maps-markers

Is it possible to delay the loading of a page using location.href?

Trying to determine when a page has finished loading using location.href. Currently, my code is set up like this and I want certain events to occur once the page is fully loaded. I attempted using $.get but encountered issues with my existing implementatio ...

phpjavascriptjquery

Exploring JSON parsing using javascript?

I'm currently attempting to work through this webRTC example and have encountered an issue that appears to be minor in nature... The if statement consistently fails to return true, despite the fact that the console message indicates that the property ...

javascriptjson

Is there a way I can retrieve a set of data from a JSON file by simply clicking on the next or

I am currently working on building a Hybrid mobile app using Angular and Ionic frameworks. Below is the sample data that I have obtained: $scope.data = [{ "PID": 108, "Name": "Demo", "TID": 20, "date": "2016/00/29" }, ...

javascriptangularjsjsonionic-framework

Trigger Vue method when the size of a div element changes

Is there a way to trigger a method every time the dimensions (width or height) of a div element change? <template> <div> </div> </template> <script> export default { methods: { updateSize() { // ...

javascripthtmlvue.jsvue-component

Ensure that you do not proceed with the next step until the promise has been fulfilled

I am currently faced with a challenge in my project where I have a service that wraps a 3rd-party API to retrieve data into my controller. However, I need to perform some data processing to pivot the information before displaying it, but I am struggling to ...

javascriptangularjspromise

Adding elements from one array to another array of a different type while also including an additional element (JavaScript/TypeScript)

I'm having trouble manipulating arrays of different types, specifically when working with interfaces. It's a simple issue, but I could use some help. Here are the two interfaces I'm using: export interface Group { gId: number; gName: st ...

javascriptarraysangulartypescript

Where am I going wrong in my attempts to use a callback function?

I am currently attempting to implement a callback function for this particular JavaScript function. function Filtering_GetSite(siteElement) { $.ajax({ type: "POST", url: "samle.asmx/f1", data: "", contentType: "application/json; charset= ...

javascript

What is the best way to manage the back button using jQuery?

I'm currently facing a challenge when it comes to managing the Browser's History. While plugins like History.js can be helpful for smaller tasks, I find myself struggling with more complex scenarios. Let me provide an example: Imagine I have a m ...

phpjavascriptjquerymodel-view-controllerpushstate

Vue.js experiencing issue with rendering Three.js library

When I began my project with vue init webpack my-project, I found myself focusing on three key files: main.js, AudioPlayer.vue, and App.vue. Despite not encountering any errors, I couldn't figure out why the three.js code was not rendering in the App. ...

javascriptnode.jsthree.jswebpackvue.js

Ways to retrieve the value from a button when it is clicked

I am facing an issue where I have buttons that are generated dynamically depending on the number of phone numbers available in the database. For example, if there are 3 phone numbers in the database, there will be three buttons displayed. The aim is that w ...

javascriptjqueryhtml

Sending Data from Browser to Node.js using Ajax

I've been struggling to send an AJAX post request to my Node server built with Express for a while now. Despite reading various solutions on similar issues, I couldn't figure out which files to edit. Initially, I attempted using `http.createServe ...

javascriptajaxnode.jsexpress