Adding Form Validation to Eztrackr

I use Trello - maybe you do too. I came across Eztrackr, a chrome extension to save notes to Trello. I noticed that Eztrackr had an open issue on github to
validate the input form before sending an API call. The first thing I did was install the extension and follow the documented steps to reproduce the bug.

With all fields filled out, the tool works great and your note will appear as a new card in your Trello board. If the user doesn't select a board, the post fails, all entered data is lost and must be re-entered. What I needed to do was run a check to make sure a board was selected before making the API call. An error message should be displayed with a close button, so that all form data fields remain untouched. All the user should have to do is fix the error by selecting the desired Trello board, and resubmit.

I walked through popup.js and found the API call and since all data fields could potentially be empty except for the idList, I just added a simple condition before its execution.

if(idList != 'Choose list'){
  Trello.post(`/cards?key=${APP_KEY}&token=${token}&idList=${idList}&name=${data_company}&desc=${description}`)

If the condition fails, an error message should prompt the user to select a Trello board. I noticed that popup.html contained two hidden divs that could be conditionally shown for (un)successful API calls and display a hard-coded message. Since I was attempting to fix a bug, I knew I needed show an error message. Instead of adding a third div, I decided I would modify the existing one.

<!-- failed posted alert -->
<div class="alert alert-danger" id="post_fail" role="alert" style="display: none;">
  <h4 class="alert-heading">Error</h4>
  <p>There was an issue posting this card to Trello. Please try again.</p>
</div>

I thought what the most efficient solution would be a generic error that could receive text from javascript instead of hard coded HTML. I added a button and the new code looked like this:

<!-- alert box -->
<div class="alert alert-danger" id="alert_box" role="alert" style="display: none;">
  <h4 class="alert-heading">Error</h4>
  <p id="alert_msg"></p>
  <button class="btn btn-danger btn-sm" id="close_alert">Close</button>
</div>

I went back to the popup.js added a function that would display #alert_box and pass text into #alert_msg. I updated the existing code to call this function if the Trello board isn't selected or after a failed API call.

After a few tests to confirm everything was working as intended, I made a pull request. Evidently the work checked all the necessary boxes, as it was merged the next day.

Fixes #28: Form validation #29

slaterslater posted on Oct 21, 2020

• alert box displays if Trello list not chosen
• close button added to alert box
• choosing a Trello list will close alert box

View on GitHub