A Case for the Truth

This week I attended the school of Hard Knocks - a course in JavaScript. The application that I am working on for the day job does validation in both JavaScript and in Ruby. One of my recent tasks was to add form input text boxes, zero to many, so that an Administrator could add URLs for resources available to the users.  

These new input boxes would be included in an existing form, which is first validated using JavaScript.  When I added the new input boxes, I received a flash message saying that my new input box needed to have an integer value greater than zero. So I dug into the existing JavaScript to see how the validation was setup.  What I found was that we had a switch with several cases and a default which would display the error I received.  My new input boxes for a url file path obviously do not need to be a non-zero integer.  So I updated the code with something similar to:  case 'url_file_path'.

This update worked fine so long as we only had one input box for url_file_path.  But the requirement was that we provide zero to many input boxes based on a certain criteria.  My thought was that I could use a regular expression within my Switch-Case code.  But I ran into an issue.  Below is a simplified version of the existing code:

Original Javascript:

// Actual, but commented out for this example:
// var id = $thisInput.attr('name');

var id = 'url_file_path';  //simulated
switch (id) {
  case 'file_title':
    //validation logic would go here
    alert('This is the file title'); //sample for testing
    break;
  case 'file_description':
    //validation logic would go here
    alert('This is the file description'); //sample for testing
    break;
  case 'url_file_path':
    //validation logic would go here
    alert('This is the file description'); //sample for testing
    break;
  default:
    alert('We hit the default');
}

I utilized the JSBin site to help me work through possible solutions.  You can find that site by clicking here

The above javascript worked fine, so long as had only one input for the file path url.  But we had the need to support zero to many url_file_path inputs.  For this discussion, let's assume we have three:

• url_file_path_001
• url_file_path_002
• url_file_path_003

Well now I have a problem with my javascript.  If you run the above example, passing in url_file_path_00n as the simulated id, then the default alert of 'We hit the default' will occur.

What I needed was a way to use a regular expression with my case statement.  I struggled with different attempts.  I thought I was going crazy.  I tried out my regular expression logic on its own, and it worked fine. (Tip: RegEx web tool: [click here]( https://regex101.com/#javascript))

I researched online for a solution, as well as referred to some JavaScripts book that I have, but I couldn't figure out what was going on.  While getting ready for bed, I came across an item on Stack Overflow, one that I think I saw a few times but discarded.  Their example kept referring to using switch (true)...  But I needed to switch on the id of the form input.

Then the light bulb went off in my head.  I made a mental note and got a good nights sleep. The next day, I put the puzzle pieces together and came up with the following solution:

var id = 'url_file_path_002';  //simulated
switch (true) {
  case /file_title/.test(id):
    alert('This is the file title'); 
    break;
  case /file_description/.test(id):
    alert('This is the file description'); 
    break;
  case /url_file_path_(\d)+/.test(id):
    alert('This is the file description');
    break;
  default:
    alert('We hit the default');
}

The above code could be tweaked a little bit since the validation for file_title and file_description are the same.  Why don't you take a crack at it and let me know how you would refactor?

Oh, I think I hear the bell - school is out for today!

Learn Something New Every Day

Last Edited by: John on November 14, 2015