Refactor and clean-up validity features to fix #733

examples/required.html

@@ -25,7 +25,8 @@ <h2>Required Element</h2>
 				<div class="control-group">
 					<form>
 						<label for="select-beast">Beast:</label>
-						<select id="select-beast" required class="demo-default" placeholder="Select a person...">
+						<select id="select-beast" required class="demo-default"
+							placeholder="Select a person..." name="beast">
 							<option value="">Select a person...</option>
 							<option value="4">Thomas Edison</option>
 							<option value="1">Nikola</option>

src/selectize.js

@@ -1611,12 +1611,26 @@ $.extend(Selectize.prototype, {
 	 * and CSS classes.
 	 */
 	refreshState: function() {
-		var invalid, self = this;
-		if (self.isRequired) {
-			if (self.items.length) self.isInvalid = false;
-			self.$control_input.prop('required', invalid);
-		}
-		self.refreshClasses();
+		this.refreshValidityState();
+		this.refreshClasses();
+	},
+
+	/**
+	 * Update the `required` attribute of both input and control input.
+	 *
+	 * The `required` property needs to be activated on the control input
+	 * for the error to be displayed at the right place. `required` also
+	 * needs to be temporarily deactivated on the input since the input is
+	 * hidden and can't show errors.
+	 */
+	refreshValidityState: function() {
+		if (!this.isRequired) return false;
+
+		var invalid = !this.items.length;
+
+		this.isInvalid = invalid;
+		this.$control_input.prop('required', invalid);
+		this.$input.prop('required', !invalid);
 	},
 
 	/**

test/setup.js

@@ -216,6 +216,7 @@
 				$form = test.$select.parents('form');
 				$button = $('<button type="submit">').appendTo($form);
 			});
+
 			afterEach(function() {
 				$form.off('.test_required');
 				$button.remove();
@@ -224,33 +225,52 @@
 			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 pass validation if an element is selected',
+			function(done) {
+				test.selectize.addItem('a');
+				$form.one('submit.test_required', function(e) {
+					done();
+				});
+
+				syn.click($button);
+			});
+
 			if ($.fn.selectize.support.validity) {
-				it('should have "invalid" class when validation fails', function(done) {
+				it('should not pass validation if no element is selected',
+				function(done) {
+					$form.one('submit.test_required', function(e) {
+						expect(e.isDefaultPrevented()).to.be.true;
+						done();
+					});
+
+					syn.click($button);
+				});
+
+				it('should have "invalid" class when validation fails',
+			  function(done) {
 					test.$select[0].checkValidity();
+
 					window.setTimeout(function() {
-						expect(test.selectize.$control.hasClass('invalid')).to.be.equal(true);
+						expect(test.selectize.$control.hasClass('invalid')).
+							to.be.true;
 						done();
 					}, 250);
 				});
-				it('should clear the invalid class after an item is selected', function(done) {
+
+				it('should clear the invalid class after an item is selected',
+				function(done) {
 					syn.click($button).delay(0, function() {
 						test.selectize.addItem('a');
-						expect(test.selectize.$control.hasClass('invalid')).to.be.equal(false);
+						expect(test.selectize.$control.hasClass('invalid')).
+							to.be.false;
 						done();
 					});
 				});
-				it('should pass validation if an element is selected', function(done) {
-					test.selectize.addItem('a');
-					$form.one('submit.test_required', function(e) {
-						done();
-					});
-
-					syn.click($button);
-				});
 			}
 		});