Discover Meteor: Add http:// automatically to inputted URL

Question

I've been trying to figure this on my own but ended up not being able to after many long hours.

I'm currently following the Discover Meteor Book for Meteor.js.

I noticed that submitting the post without the http:// would link the links to localhost:3000/submittedurl.

I want meteor to automatically add http:// to URLs when submitted. Logically, it wouldn't add the http:// when a scheme is included in the input field.

//post_submit.js

Template.postSubmit.created = function() {
    Session.set('postSubmitErrors', {});
};

Template.postSubmit.helpers({
    errorMessage: function(field) {
        return Session.get('postSubmitErrors')[field];
    },
    errorClass: function(field) {
        return !!Session.get('postSubmitErrors')[field] ? 'has-error' : '';
    }
});

Template.postSubmit.events({
    'submit form': function(e) {
        e.preventDefault();

        var post = {
            url: $(e.target).find('[name=url]').val(),
            title: $(e.target).find('[name=title]').val()
        };

        var errors = validatePost(post);
        if (errors.title || errors.url)
            return Session.set('postSubmitErrors', errors);

        Meteor.call('postInsert', post, function(error, result) {
            // display the error to the user and abort
            if (error)
                return throwError(error.reason);

            // show this result but route anyway
            if (result.postExists)
                throwError('This link has already been posted');

            Router.go('postPage', {_id: result._id});
        });
    }
});

please be precise, and explain more about problem – ajduke Nov 20 '14 at 17:51 — ajduke, Nov 20 '14 at 17:51

score 0 · Accepted Answer · edited May 23 '17 at 12:07

Well, in fact this is a simple javascript question, not necessarily related to Meteor.

For example, the answer to this question Prepending "http://" to a URL that doesn't already contain "http://" provides a method:

checkForProperURLPrefixAndFixIfNecessary = function(testUrl) {
  var prefix = 'http://';
  if (testUrl.substr(0, prefix.length) !== prefix) {
    testUrl = prefix + testUrl;
  }
  return testUrl;
}

or you can see other answers for different methods. I think the JS-URI library approach is much safer.

So let's say you have the checkForProperURLPrefixAndFixIfNecessary(testUrl) function declared in your source as given above, then you can change

var post = {
  url: $(e.target).find('[name=url]').val(),
  title: $(e.target).find('[name=title]').val()
};

to

var post = {
  url: checkForProperURLPrefixAndFixIfNecessary( $(e.target).find('[name=url]').val() ),
  title: $(e.target).find('[name=title]').val()
};

But once you finish through the Discover Meteor book, which is the greatest way of learning Meteor, take a look at the awesome https://github.com/aldeed/meteor-simple-schema package or just search for schema or validation on https://atmospherejs.com/ for more robust ways of checking user input for proper type and structure.

Also, url schemes can have different contexts like http, https, ftp, scp, mailto etc, I'd rather let the user know by way of showing an error prompt instead of just going ahead and *fixing* the input assuming it is http. — Serkan Durusoy, Nov 20 '14 at 18:58
Thank you so much Serkan Durusoy. I'm a designer trying to learn web development to further my knowledge and skills for web-app creations. I will try to do my best to work this out! — Sang Yoo Kim, Nov 21 '14 at 11:01
Discover Meteor is a great resource @SangYooKim and after completing that, make sure you read through the official http://docs.meteor.com — Serkan Durusoy, Nov 21 '14 at 19:14

Discover Meteor: Add http:// automatically to inputted URL

1 Answers1