better support for <select>s

qcx · Aug 8, 2017 · 8bd757e · 8bd757e
1 parent 6da4c1b
commit 8bd757e
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 10 deletions.
diff --git a/dist/js/validate.js b/dist/js/validate.js
@@ -35,6 +35,8 @@
 
 		// Messages
 		messageValueMissing: 'Please fill out this field.',
+		messageValueMissingSelect: 'Please select a value.',
+		messageValueMissingSelectMulti: 'Please select at least one value.',
 		messageTypeMismatchEmail: 'Please enter an email address.',
 		messageTypeMismatchURL: 'Please enter a URL.',
 		messageTooShort: 'Please lengthen this text to {minLength} characters or more. You are currently using {length} characters.',
@@ -160,7 +162,14 @@
 		if (validity.valid) return;
 
 		// If field is required and empty
-		if (validity.valueMissing) return localSettings.messageValueMissing;
+		if (validity.valueMissing) {
+
+			if (field.type === 'select-multiple') return localSettings.messageValueMissingSelectMulti;
+
+			if (field.type === 'select-one') return localSettings.messageValueMissingSelect;
+
+			return localSettings.messageValueMissing;
+		}
 
 		// If not the right type
 		if (validity.typeMismatch) {

diff --git a/dist/js/validate.min.js b/dist/js/validate.min.js
diff --git a/dist/js/validityState-polyfill.js b/dist/js/validityState-polyfill.js
@@ -75,7 +75,7 @@
 			tooLong: (field.hasAttribute('maxLength') && field.getAttribute('maxLength') > 0 && length > parseInt(field.getAttribute('maxLength'), 10)), // the user has edited a too-long value in a field with maxlength
 			tooShort: (field.hasAttribute('minLength') && field.getAttribute('minLength') > 0 && length > 0 && length < parseInt(field.getAttribute('minLength'), 10)), // the user has edited a too-short value in a field with minlength
 			typeMismatch: (length > 0 && ((type === 'email' && !/^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*$/.test(field.value)) || (type === 'url' && !/^(?:(?:https?|HTTPS?|ftp|FTP):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)*)(?::\d{2,5})?(?:[\/?#]\S*)?$/.test(field.value)))), // value of a email or URL field is not an email address or URL
-			valueMissing: (field.hasAttribute('required') && (((type === 'checkbox' || type === 'radio') && !field.checked) || (type === 'select' && field.options[field.selectedIndex].value < 1) || (type !=='checkbox' && type !== 'radio' && type !=='select' && length < 1))) // required field without a value
+			valueMissing: (field.hasAttribute('required') && (((type === 'checkbox' || type === 'radio') && !field.checked) || (type === 'select' && (field.selectedIndex === -1 || field.options[field.selectedIndex].value < 1)) || (type !== 'checkbox' && type !== 'radio' && type !=='select' && length < 1))) // required field without a value
 		};
 
 		// Run browser's own validation if available