Guide to handling URL errors in a form using AngularJS

I'm currently working on implementing URL validation for my form. The validation itself is working properly, but I've encountered an issue. Previously, I had validation set up so that an error message would display when submitting the form with empty fields. However, after changing to URL validation, the form no longer shows an error message when submitted with an empty URL field.

<div class="col_full">
    <label for="newsUrl">URL <small>*</small></label>
    <input ng-class="{'error': submitted && addNews.newsUrl.$error.required}"  id="newsUrl" name="newsUrl" type="url" ng-model="news.url"  class="sm-form-control" required/>
</div>
javascriptangularjsformsform-submit

Answer №1

Make sure to validate the URL by checking addNews.newsUrl.$error.url within your ng-class with code similar to this:

<div class="col_full">
             <label for="newsUrl">Enter URL <small>*</small></label>
             <input ng-class="{'error': submitted && addNews.newsUrl.$error.required && addNews.newsUrl.$error.url}"  id="newsUrl" name="newsUrl" type="url" ng-model="news.url"  class="sm-form-control" required/>
 </div>

I hope this solution works for you :)

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

Steps for displaying the output of a post request in printing

I am currently working on creating a basic search bar functionality for daycares based on user input. I am utilizing a post request to an API and receiving back a list of daycares that match the input. Below is the code snippet: <template> <div ...

javascripthtmlvue.jsvuejs2vue-component

Javascript if-else is malfunctioning

I am having difficulty running the code below which contains if statements. I have tried removing some parts of it, but still can't get the alert to show up. Any advice would be highly appreciated. Thank you. <!DOCTYPE html> &l ...

javascriptif-statement

In React, ensure a component's state is preserved when the browser history changes

I recently developed a React application that features a classic layout with a left-side menu, title, footer, and main content section. The side menu includes navigation links structured using components such as <List>, <ListItem>, etc. from th ...

javascriptreactjsmaterial-ui

Delete an entry in a singular mapping in a one-to-one connection [TypeORM]

Is there a way to remove an index from a one-to-one relationship in TypeORM? @OneToOne(() => Customer, { cascade: true }) @JoinColumn({ name: 'customer', referencedColumnName: 'uid' }) customer: Customer I searched the d ...

javascriptmysqlnode.jstypescripttypeorm

Ways to retrieve dropdown values

My HTML code is as follows: <select class="height_selected"> <option>Select Height</option> <option ng-model="userHeight" ng-init="1" value="1">123 cm</option> <option ng-model="userHeight" ng-init="2" v ...

javascriptphpjqueryhtmlangularjs

Exploring the object structure received from AngularFire

Here is the Firebase query that I am running: var ref = new Firebase('https://<myfirebase>.firebaseio.com/companies/endo/status'); data = $firebaseObject(ref); console.dir(data); The object that I receive looks like this: d ...

javascriptangularjsfirebaseangularfire

Employing promises for fetching data via XHR results in a promise that is still pending

Currently, I am experimenting with promises to handle asynchronous requests using XHR. Interestingly, I noticed that when I try to log the result within the .then function, it works perfectly fine. However, if I attempt to log it outside of this scope, it ...

javascriptnode.jspromisexmlhttprequest

How a Dynamic Icon Component in NextJS/React can disrupt Jest testing

Hello there! I'm a new member of this community, and usually I can find answers to my questions by searching. However, this time around, I need some help. My Current Setup I am using NextJS solely as a framework application without utilizing its API ...

javascriptreactjsjestjsnext.js

Asserting within a specific condition's scope in TypeScript

I am facing a similar situation, type Field1Type = { a: string; } type Field2Type = { b: string; c: number; } type ObjType = { field: Field1Type | Field2Type } const field = { b: "" c: 0 } const obj = { field } as ObjType i ...

javascripttypescript

Differences in HTML animations can be seen when comparing Google Chrome to Microsoft Edge. Looking for a workaround for autoplay to ensure

My intro video animation is facing recording difficulties due to the autoplay policy in Google Chrome. It seems nearly impossible to capture it accurately. If only autoplay could function for an offline HTML file, my issue would be resolved. Unfortunately ...

javascripthtmlcssgoogle-chromemicrosoft-edge

How can you incorporate a displacement map onto a mesh using the Three.js framework?

JSFiddle: http://jsfiddle.net/ma791nd8/1/ I'm encountering some challenges due to outdated tutorials and limited documentation, which is why I've decided to seek assistance here. After reviewing one of the examples provided, I created a jsfiddl ...

javascriptthree.js

Tips for customizing the border of an outlined TextField in MUI

Below is the current configuration of a TextField component: const styles = { resize: { fontSize: '50px', } } const textField = (props) => { const { classes } = props; return ( <TextField valu ...

javascriptreactjsmaterial-ui

Angular event triggered when updating input values from the model

I have developed a custom directive to add functionality to input fields with a specific class. I want to trigger events on blur and focus to update the label style based on Material Design principles. However, when using ng-model in Angular, I also need t ...

javascriptjqueryangularjs

PhoneGap and jQuery prove ineffective in fetching json results from Twitter

I've been working on a project to fetch the most recent 50 tweets with a specific hash tag. The project is built for mobile devices using PhoneGap (0.9.6) and jQuery (1.6.1). Below is my code: function retrieveTweets(hash, numOfResults) { var uri ...

javascriptjqueryjsoncordova

Error: The function jQuery(...).hexColorPicker does not exist

I am attempting to utilize a color-picker jQuery plugin. Below is a screenshot of the JavaScript file: https://i.stack.imgur.com/ovRjx.png Here is the code I am using to initialize it: <script type="text/javascript> jQuery(function(){ ...

javascriptjqueryhtml

Is your Node.js HTTP Request failing to function properly?

I am currently working on creating an HTTP Request function where all requests are directed to the same domain but with different file names. Unfortunately, I am encountering a problem where nothing is being displayed in the console and no data is being r ...

javascriptnode.js

Combining various JSON objects by nesting them together

I'm in the process of creating an endpoint where I need to combine data from four different tables into one nested object. Each table record is retrieved in JSON format using sequelize - they include information on location, service, staff, and tenant ...

javascriptjsonexpresssequelize.js

The HTML image is not updating, the function does not appear to be triggering

My attempt to add a source to an image using JavaScript and some jQuery code I found online isn't working as expected: <html> <head> <script src = "http://www.example.com/images/"> var count=1; var initnumber=100 ...

javascriptjqueryhtml

What is the default state of ng-switch in AngularJS?

I am completely new to using AngularJS and I have a question about setting a default ng-switch state in the following Plunkr. Currently, I can only get it to work when clicking, but ideally the menu should be displayed automatically if the user button is t ...

javascriptangularjs

Is it possible to reference the prior value of a computed Angular signal in any way?

Is it possible to dynamically add new values from signal A to the existing values in signal B, similar to how the scan operator works in RxJS? I am looking for something along the lines of signalB = computed((value) => [...value, signalA()]). Any sugg ...

javascriptangulartypescriptrxjssignals