My second Hacktoberfest PR!

As I continued to look for repos to contribute to, I found a really cool website that generates web profile cards for you based on some entered info.

Here's what the generated cards looked like:

The project was in a fairly early stage, hence the limited amount of features and designs, but that made it an ideal project for a meaningful contribution.

Table of Contents

 1. The Issue
 2. Working on the issue
 3. The Pull Request 🎊
 4. Conclusion

The Issue

When I was first trying out the tool, I felt a strong itch on seeing the form controls lacked any validation and the user could click on Generate Card button only to receive templates for dummy cards with placeholder info.

Since there was no existing issue for this, I decided to open one myself for this enhancement. I asked the maintainer if I could work on it, and got a green flag fairly quickly.

Follow this link for more details :
[Feature] Adding input validations to the form

Working on the issue

Initially I thought this was going to be a no brainer, as all I had to do was add basic client-side validation to an html form, something you do in your first year.

Exactly that happened!

After writing a few lines of code, I was taken back to the good old WEB222 notes from my second semester. Since I had worked on forms using vanilla js almost an eternity ago, I was struggling to remember how you did certain basic things like what method you use to check if the form is in a valid state 🤭.

As soon as I got a hang of working with normal forms (no frameworks), I got stuck with a problem with the regular expression I was using to validate urls, even though I copied it from a credible source.

Here we go again!

Now I had to revisit ULI101 notes from semester 1 to make sure how to group regular expressions correctly (using |).

After figuring out problems with my regular expression, which was an accidentally copied character, I ended up with these 2 functions listening for any changes in the inputs, and only enabling the Generate Card button once all the validation checks passed.

//#region Form Validation

function configureFormValidation() {
  const inputSelector = "input, textarea, select";
  const cardForm = document.getElementById('card-form');
  const controls = cardForm.querySelectorAll(inputSelector);

  controls.forEach(control => {
    control.addEventListener("input", () => {
        generateButton.disabled = !validateForm(); // intersection with custom check
    });
  });

  generateButton.disabled = !validateForm();
}

/**
 * Custom Validation for form inputs
 * 
 * @returns True if all input elements pass validation checks
 */
function validateForm() {
  const cardForm = document.getElementById('card-form');
  let valid = cardForm.checkValidity();

  // Get controls
  const twitterLink = document.getElementById("twitter").value;
  const githubLink = document.getElementById("github").value;
  const linkedinLink = document.getElementById("linkedin").value;

  const links = [twitterLink, githubLink, linkedinLink];
  const validLinkRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;

  // Every link should be of valid format and at least one link should not be empty
  valid = valid && links.every(link => validLinkRegex.test(link.trim()) || link.length === 0) && links.some(link => link.trim().length);

  return valid;
}

//#endregion

Note: I used a very minimialistic regular expression, which could be replaced with a more robust one.

The Pull Request 🎊

Once I was finished testing the functionality against all possible edge cases I could think of, I opened a Pull Request into the upstream main branch explaining all the changes I had made and how the validation worked.

I also pushed a couple more commits to add * symbols against required field labels (forgot initally), and refactoring my code to be more concise.

The merge process was really smooth this time, as the maintainer approved the PR, just minutes after I pushed my latest commits.

Conclusion

All in all, this PR, although not hard, served as a valuable recap of some of the basic concepts from my early college terms.

What I expected would take me no more than 20 minutes, ended up taking more than 2 hours of figuring out concepts, debugging and finishing up the enhancement.

Working on open source projects is filled with uncertainties. Always start early, and give yourself enough time to recover from unexpected crises.

Comments

[Michael Tharrington]

Awesome stuff, Amnish!

Just a quick reminder to make sure to get all 4 PRs in and share a post with us before the month is up if you're hoping to score those DEV Hacktoberfest badges mentioned here.

To make sure you get the badges you're after, please just follow these steps:

1. Sshare a post that includes direct GitHub PR links to help us verify your contributions.
2. Ensure your GitHub account matches your Hacktoberfest profile. It's crucial for validation.
3. Refer to the Contributor Template for detailed post formatting guidance.

Do all these things and we'll be sure to give you the honored contributor badge. In any case, we'll still give you the pledge badge for writing this post up. 🙌

Thanks so much for participating in this year's event. By the way, you can refer to this post for full contributor completion instructions.

[Amnish Singh Arora]

Thanks Michael, I didn't know about this stuff.

This really helps! I'll definitely write the post.

[Michael Tharrington]

Hey Amnish! No probs at all and thank you for being so receptive to this feedback. Really awesome writing in these posts too!! I see your latest one and it's awesome — so thorough and well written. It's cool to hear all the details of your experience. Appreciate ya sharing with us!