Changes I made

edit_profile.html

<div class="groups-tagit">
          {{ form.groups.label_tag() }}
          {{ form.groups }}</div>
<div class="skills-tagit"> 
          {{ form.skills.label_tag() }}
          {{ form.skills }}</div>

validation.js

var Validator = function() {
    var displayError = function(field, message) {
        var control_group = field.parents('.control-group')
        var error_message = $('<span class="help-inline"></span>');

        // wipe out any existing error messages for this field so
        // we don't have duplicates

        control_group.addClass('error')
        control_group.children('span.help-inline').remove()
        control_group.find('p.help-block').before(error_message.text(message))
			alert(message);

        this.errors = true;
			
    },
	var displayAnotherError = function(field, message) {
    var group = field.parents('.groups-tagit')
    group.addClass('error')
    group.children('span.help-inline').remove()
    group.append('<span class="help-inline">' +
                 '<p class="help-block">' + message + '</p>' + '</span>')
}

//to method validateGroup
validateGroup: function(group, field) {
            var name = group.children('span').text();
            if (name.match(/^[a-zA-Z0-9 .:,-]*$/g) === null) {
                displayAnotherError(field, gettext('Groups can only contain ' +
                                            'alphanumeric characters, dashes, ' +
                                            'spaces.'));
                // HACK: Do this without dirty DOM manipulation.
                group.children('a.tagit-close').click();
                
            }
        },