AngularJS Tutorial #22 - Form Validation (part 1)

Yo ninjas, in this AngularJS tutorial, I'll be introducing Angular's form validation classes and objects that we can use to offer feedback to our users when they incorrectly fill in a form. There are typically a few 'pairs' of form validation classes, such as ng-dirty and ng-pristine, which swap for one another when a user interacts in some way with the form...

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== JavaScript for Beginners Playlist ==========

============ CSS for Beginners Playlist =============

============== The Net Ninja =====================

================== Social Links ==================

[earlworth]

Timesaver: form code to paste in!

<div class="content">
<form name="contactForm" novalidate>
<input type="text" placeholder="name" name="name" />
<input type="email" placeholder="Email" name="email" />
<textarea placeholder="Your message" name="message"></textarea>
<input type="submit" value="Send" />
</form>
</div>

[houmamhatahet]

add this to your style.css folder to apply the same effects to your textarea:

.content textarea{
width: 90%;
padding: 10px 5%;
border-radius: 10px;
border: 2px solid #ddd;
margin: 10px 0;
}

[prateekbhardwaj]

using earphones, ninja sound blew my ears! anyways awesome tutorial :)

[lasithacharuka]

if u have problem in border try using

border : 2px;
border : solid red;

[tilmanahlers]

Hello,

thanks for super tutorial. Can I download your example anywhere. When I'm checking your github link there is just a blank index.html side. Thanks in advance

Best regards

[frodion]

add an !important after "border: 2px solid red;" will solve problems, if the border is not shown correctly:

input.ng-invalid, textarea.ng-invalid{
border: 2px solid red !important;
}

[jhon.bianchi]

if i have a select how can make a border red ? cuz select.ng-invalid.ng-touched dont work bro

[sandipsingh]

thanks for the awesome tutorial but i got error module injector when hitting the register in angularjs 1.7.5

[yateshchhabra]

In a form i have uername and password and if i add span after username and password in ng-show if Touched and error is true if the person gets click the button and it will reload the page and starts with the same.