Input validation with Bootstrap warning

index.html

<div class="form-group">
  <label class="control-label" for="url">URL</label>
  <input class="form-control" type="url" id="url" placeholder="https://api.example.com/" />
  <p class="help-block" id="url-help"></p>
</div>

javascript.js

$('#url').on('input', function (e) {
    if ($(this).val().startsWith("http://")) {
        $(this).parent().addClass('has-warning');
        $('#url-help').text('Note that the communication will not be secure.');
    } else {
        $(this).parent().removeClass('has-warning');
        $('#url-help').text(null);
    }
});