kylefang/bootstrap-tokenfield
1
0
Fork 0
mirror of https://github.com/zhigang1992/bootstrap-tokenfield.git synced 2026-04-29 04:15:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Prevent form submit when entering duplicates. Closes #45

Browse Source
This commit is contained in:
Illimar Tambek
2013-12-02 16:16:40 +02:00
parent 7637078b0b
commit f2ab2290fb
4 changed files with 131 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
bootstrap-tokenfield/bootstrap-tokenfield.js vendored
View File

@@ -401,7 +401,7 @@
, keydown: function (e) {
if (!this.focused) return
if (!this.focused) return
switch(e.keyCode) {
case 8: // backspace
@@ -500,18 +500,21 @@
break
case 9: // tab
case 13: // enter
case 13: // enter
// We will handle creating tokens from autocomplete in autocomplete events
if (this.$input.data('ui-autocomplete') && this.$input.data('ui-autocomplete').menu.element.find("li:has(a.ui-state-focus)").length) break
// We will handle creating tokens from typeahead in typeahead events
if (this.$input.hasClass('tt-query') && this.$wrapper.find('.tt-is-under-cursor').length ) break
if (this.$input.hasClass('tt-query') && this.$wrapper.find('.tt-hint').val().length) break
// Create token
if (this.$input.is(document.activeElement) && this.$input.val().length || this.$input.data('edit')) {
this.createTokensFromInput(e, this.$input.data('edit'))
return this.createTokensFromInput(e, this.$input.data('edit'));
}
// Edit token
if (e.keyCode === 13) {
if (!this.$copyHelper.is(document.activeElement) || this.$wrapper.find('.token.active').length !== 1) break
this.edit( this.$wrapper.find('.token.active') )
@@ -610,11 +613,14 @@
}
, createTokensFromInput: function (e, focus) {
if (this.$input.val().length < this.options.minLength) return
if (this.$input.val().length < this.options.minLength)
return // No input, simply return
var tokensBefore = this.getTokensList()
this.setTokens( this.$input.val(), true )
if (tokensBefore == this.getTokensList() && this.$input.val().length) return // No tokens were added, do nothing
if (tokensBefore == this.getTokensList() && this.$input.val().length)
return false // No tokens were added, do nothing (prevent form submit)
if (this.$input.hasClass('tt-query')) {
// Typeahead acts weird when simply setting input value to empty,
@@ -628,8 +634,7 @@
this.unedit(focus)
}
e.preventDefault()
e.stopPropagation()
return false // Prevent form being submitted
}
, next: function (add) {

2
bootstrap-tokenfield/bootstrap-tokenfield.min.js vendored
View File

File diff suppressed because one or more lines are too long

105
test/test.tokenfield.integration.js
View File

@@ -642,6 +642,111 @@ describe('Integration', function() {
});
});
describe("Pressing enter with when there is no input", function() {
var submitted = false;
before(function() {
TFT.template = '<form method="post" action=""><input type="text" class="tokenize" value="red,green,blue" /><input type="submit"></form>';
});
after(function() {
delete TFT.template;
});
beforeEach(function() {
this.$sandbox.find('form').on('submit', function(e) {
submitted = true;
event.preventDefault();
return false;
});
this.$input.focus().simulate("key-sequence", { sequence: "{enter}" });
});
it("should submit the underlying form", function() {
submitted.should.equal(true);
});
});
});
describe("Duplicates", function() {
describe("Setting allowDuplicates to false", function() {
var submitted = false;
before(function() {
TFT.template = '<form method="post" action=""><input type="text" class="tokenize" value="red,green,blue" /><input type="submit"></form>';
TFT.options = { allowDuplicates: false }
});
after(function() {
delete TFT.template;
delete TFT.options;
});
beforeEach(function() {
this.$sandbox.find('form').on('submit', function(e) {
submitted = true;
event.preventDefault()
return false;
});
this.$input.focus().simulate("key-sequence", { sequence: "red{enter}" });
});
it("should not create a duplicate token", function() {
this.$field.tokenfield('getTokensList').should.equal('red, green, blue');
});
it("should keep the duplicate value in the input", function() {
this.$input.val().should.equal('red');
});
it("should not submit the form when pressing enter", function(done) {
setTimeout(function() {
submitted.should.equal(false);
done();
}, 1);
});
});
describe("Setting allowDuplicates to true", function() {
var submitted = false;
before(function() {
TFT.template = '<form method="post" action=""><input type="text" class="tokenize" value="red,green,blue" /><input type="submit"></form>';
TFT.options = { allowDuplicates: true }
});
after(function() {
delete TFT.template;
delete TFT.options;
});
beforeEach(function() {
this.$sandbox.find('form').on('submit', function (event) {
submitted = true;
event.preventDefault()
return false;
});
this.$input.focus().simulate("key-sequence", { sequence: "red{enter}" });
});
it("should create a duplicate token", function() {
this.$field.tokenfield('getTokensList').should.equal('red, green, blue, red');
});
it("should not keep the duplicate value in the input", function() {
this.$input.val().should.equal('');
});
it("should not submit the form when pressing enter", function(done) {
setTimeout(function() {
submitted.should.equal(false);
done();
}, 1);
});
});
});
});

13
test/vendor/jquery.simulate.key-sequence.js vendored
View File

@@ -81,6 +81,7 @@
opts = $.extend({
sequence: "",
triggerKeyEvents: true,
triggerFormEvents: true,
delay: 0,
callback: undefined
}, this.options),
@@ -332,6 +333,18 @@
'{enter}': function (rng, s, opts){
rng.insertEOL();
rng.select();
if (opts.triggerFormEvents === true) {
var $_form = $(rng._el).parents('form');
if ($_form.length && $_form.find('[type=submit]').length) {
$(rng._el).on('keydown', function (event) {
if (event.keyCode === 13 && !event.isDefaultPrevented()) {
$_form.trigger('submit');
}
});
}
}
if (opts.triggerKeyEvents === true) {
$(rng._el).simulate('keydown', {keyCode: 13});
$(rng._el).simulate('keypress', {keyCode: 13, which: 13, charCode: 13});