I've been searching through the documentation for angularjs and online resources, but I can't seem to find any information regarding a specific aspect of form validation. You know when you input something in a form field (like a name, phone number, or email) and then a green checkmark or X appears next to it indicating whether it's correct or incorrect?
Well, I have those icons saved in my folder and ready to use for this purpose. The issue is that I'm struggling to find the right instructions on how to implement this feature properly. Since my code is mostly in angularjs, I believe using angularjs would be the best solution.
I came across some options in the documentation and forum posts related to angularjs, but unfortunately, they didn't work for me due to various reasons:
How to put an image in div with CSS?
https://docs.angularjs.org/tutorial/step_09
I attempted to utilize CSS to manipulate the browser into displaying one of the images based on validation status. However, my efforts were futile as the image in my other div did not appear as expected.
For instance, I experimented with this CSS:
.ng-valid.ng-dirty .div.test{
border-color: green;
content:url(http://example.com/image);
}
Incorporating this code into my HTML:
<div class="test">
<label style="float:left">by:</label>
<input class="form-control controltwo" required ng-model="reviewCtrl.review.author" name="email" id="email" type="email" style="width:350px;" placeholder="Email Address"/>
</div>
As mentioned earlier, my goal is to achieve this using angularjs. While CSS can handle styling, it falls short when it comes to complex validation tasks. I've explored different techniques from the provided links, but none of them proved effective. The second link, in particular, isn't designed for this specific functionality and the filter documentation doesn't offer much help either.