I’ve been spending a lot of time on the backend recently. Sometimes node, sometimes C#, but - by and large - writing APIs that someone else is going to put a frontend on. It’s been nice.

Well today I ended up on the frontend making some small changes and it made me sad. Don’t get me wrong, I like the frontend, but it brought back bad memories of “javascript before node.” That’s not to say that node magically makes javascript good, just that I finally learned how to use javascript at the same time I was learning it in the context of node.

Anyway

One of the things this frontend was doing a whole bunch of was some non-traditional, asynchronous, (optional) validation. A non-true example:

There is a form-field for the user’s favorite git repository. If they fill it in, we will download a quotes.md file and display a random one on their profile page.

If they don’t fill it in, no biggie. If they do fill it in with a bad git repository, it’s not something we want to interrupt their flow for.

We do a lot of that kind of stuff.

And all over the page there was:

1
<input id="gitRepo" type="text" placeholder="git repository"/>
<button id="gitValidate" type="submit">validate</button>
<br/>
<span id="gitValMsg"></span>

<script type="text/javascript">
  $("#gitValidate").click(function (event) {
    event.preventDefault();
    var git = $("#gitRepo").val();

    $.ajax({
      url: "/git/validation/yo",
      data: {'gitRepo': git },
      success: function (data) {
          $('#gitValMsg').html(data);
      }
    });
  });
</script>

Y’know, but more than that. And for several more fields. I was in this file adding yet-another-field when I went insane and decided to fix this once and for all.

I considered jquery-validate but that seemed like overkill for me. I don’t know that for certain because I didn’t even try. The rest of our form is validated server-side, so it was just these few optional fields I needed to validate and they weren’t as simple as “looks like a [name|url|phone number|email address]”.

jQuery-simplevalidator

And so I javascripted this javascript. And I called it jquery-simplevalidator. And I put it on github.

In short, it is a super-basic (and relatively opinionated) bit of UI enhancement that asks a URL what it thinks about the value inside of a textbox. Then we just dump whatever the URL says back onto the screen.

So that above javascript becomes:

1
// This validator will GET /git/validation/yo?gitRepo=${our-textbox-value}
    var urlValidator = $.simpleValidator.validators.urlValidator('/git/validation/yo', 'GET', 'gitRepo');

// Bind this validator to our form control. Fires on-click.
$('#gitValidate').simpleValidator("#gitRepo", '#gitValMsg', urlValidator);

Which looks (roughly) like:

I don’t know if that gif animates or not, as I’ve never tried to put an animated gif here, but maybe-not-pictured is the nice little font-awesome spinner you get on your button for free if you’re using font-awesome.

The above example uses the built-in urlValidator that just takes a single textbox and sends it off to a URL.

But you know how, with javascript, you can make anything do anything if you write enough functions.

You can make a your own validator with no trouble by just providing it the name of a function that expects a single string and returns a promise. Like this one I use in a demo:

1
var fakeValidator = function(text) {  
      var deferred = new $.Deferred();

      setTimeout(function() {
          deferred.resolve("two seconds ago, you told me: <font color='green'><strong>" + text + "</strong></font>");
      }, 2000);

      return deferred.promise();
    };

But you can even disregard that rule if you like, because javascript.

Anyway, give it a shot. It might be just what you need for your project. See the gist for better usage instructions.

Or try the demo here.