Handle required elements (fixes #63)

src/selectize.js

@@ -12,6 +12,8 @@ var Selectize = function($input, settings) {
 		highlightedValue : null,
 		isOpen           : false,
 		isDisabled       : false,
+		isRequired       : false,
+		isInvalid        : false,
 		isLocked         : false,
 		isFocused        : false,
 		isInputFocused   : false,
@@ -210,6 +212,22 @@ $.extend(Selectize.prototype, {
 			delete settings.items;
 		}
 
+		self.isRequired = self.$input.is(":required");
+		self.$control_input.prop('required', self.isRequired && !self.items.length);
+
+		// feature detect for the validation API
+		if(self.$input[0].validity) {
+			self.$input.on('invalid' + eventNS, function(event){
+				event.preventDefault();
+				self.isInvalid = true;
+				self.refreshClasses();
+			});
+			self.$input.on('change' + eventNS, function(event){
+				self.isInvalid = !self.$input[0].validity.valid;
+				self.refreshClasses();
+			});
+		}
+
 		self.updateOriginalInput();
 		self.refreshItems();
 		self.refreshClasses();
@@ -291,6 +309,7 @@ $.extend(Selectize.prototype, {
 	 * input / select element.
 	 */
 	onChange: function() {
+		this.$control_input.prop('required', this.isRequired && !this.items.length);
 		this.$input.trigger('change');
 	},
 
@@ -1298,6 +1317,8 @@ $.extend(Selectize.prototype, {
 		this.$control
 			.toggleClass('focus', self.isFocused)
 			.toggleClass('disabled', self.isDisabled)
+			.toggleClass('required', self.isRequired)
+			.toggleClass('invalid', self.isInvalid)
 			.toggleClass('locked', isLocked)
 			.toggleClass('full', isFull).toggleClass('not-full', !isFull)
 			.toggleClass('dropdown-active', self.isOpen)

test/setup.js

@@ -158,6 +158,56 @@
 			});
 		});
 
+		describe('<select required>', function(){
+			var form;
+			before(function(){
+				test = setup_test('<select required>' +
+					'<option value="">Select an option...</option>' +
+					'<option value="a">A</option>' +
+				'</select>', {});
+				test.$select.parent().children().wrapAll("<form>");
+				form = test.$select.parent();
+				form.append("<button>");
+				form.on('submit', function(event){
+					event.preventDefault();
+					assert.ok(false, 'the form was submitted');
+				});
+			});
+			it('should have isRequired property set to true', function() {
+				expect(test.selectize.isRequired).to.be.equal(true);
+			});
+			it('should have the required class', function() {
+				expect(test.selectize.$control.hasClass('required')).to.be.equal(true);
+			});
+			it('should have the invalid class when validation fails', function() {
+				test.$select[0].checkValidity();
+				expect(test.selectize.$control.hasClass('invalid')).to.be.equal(true);
+				expect(test.selectize.isInputFocused).to.be.equal(false);
+			});
+			it('should gain focus when validation via a button fails', function() {
+				$("form button").click();
+				expect(test.selectize.$control.hasClass('invalid')).to.be.equal(true);
+				expect(test.selectize.isInputFocused).to.be.equal(true);
+			});
+			it('should clear the invalid class after an item is selected', function(){
+				$("form button").click();
+				test.selectize.addItem('a');
+				expect(test.selectize.$control.hasClass('invalid')).to.be.equal(false);
+			});
+			it('should pass validation if an element is selected', function(done){
+				test.selectize.addItem('a');
+				form.off('submit').on('submit', function(event){
+					event.preventDefault();
+					done();
+				});
+				$("form button").click();
+			});
+			after(function(){
+				test.teardown();
+				form.remove();
+			});
+		});
+
 	});
 
 })();