Day 17: Home-grown validation

>>> Brief summary

First off, I created a landing page with my login/signup modal window, fixed the routes that lead out from that, and learned the capital of Mauritania. It’s Nouakchott.

Then I started hanging out with JavaScript. We aren’t best mates yet, but there’s definitely something going on. We’re vibing right now. It’s a situation of mutual respect.

Because of my previously documented situation with WTForms, and the fact that the WTForms-Parsley-JS plugin hasn’t been maintained and I can’t find another library that integrates WTForms with some nice front-end jQuery-style form validation (and insert here another 40 failed Google search attempts at finding something I could understand), I decided to give up the ghost and just write some basic front-end form-checking myself. I borrowed somebody’s crazy email regex from Stack Overflow, read through it a few times to make sure I knew what most of the symbols meant, and plopped it into an email check function called with a .change event listener on my email fields. It sort of works.

>>> Where I struggled

My main problem this evening what trying to get error-related icons to show up next to my email and password boxes if they fail my requirements tests. I only wrote one email check and one password check, but I have two of those fields, and so I created four <img> elements in the forms next to them that have no src unless the checks fail. However, I was stumped by the fact that when you write a little jQuery check like this:

$(#login-email).change(checkEmailError);

you can’t actually pass any parameters to the function that .change is calling. So I wasn’t sure how to say “hey, if you’re checking the login-email element, pass a SRC parameter to that <img> element I plopped next to the login-email element, else do the same thing with the signup-email elements. Though as I write this out, it’s clear I could have used an if-else in the checkEmailError function to handle this as well. Thanks, blog!

Regardless, somebody took a precious chunk of their evening time to show me how to use evt.currentTarget (and associated methods) to grab things off the element you’re working on instead of trying to pass parameters in, and since that seems like a great place to start the day tomorrow, I called it a night on coding. Oh, and the Trader Joe’s Pumpkin Bread Pudding was ready. So my priorities shifted to that, obviously.

>>> Thoughtful takeaway

Making the decision to move away from “the hunt for the right tool” and just starting to write code was hard for me. Upon reflection I realize that’s a bit weird, because I used to put Ikea furniture together without the instructions, if you know what I mean. I’m finding a better balance of ‘dive right in’ and ‘sharpen your ax first.’ It’s empowering.