Add support for select

serializer.js

@@ -7,7 +7,7 @@ HTMLElement.prototype.isChildOf = function(parent){
 		node = node.parentNode;
 	}
 	return false;
-}
+};
 
 class SerializerField {
 	/**
@@ -20,7 +20,7 @@ class SerializerField {
 		this.name;
 		this.parent;
 		this.field = f;
-		this.required = f.required
+		this.required = f.required;
 		this.type = this.field.getAttribute("type");
 	}
 
@@ -30,22 +30,35 @@ class SerializerField {
 	 * @returns {(String|Number|Boolean|Date)}
 	 */
 	serialize() {
+		if (this.field.tagName == "SELECT" && this.field.multiple) {
+			return Array.apply(null, this.field.options).filter(o => o.selected).map(o => o.value)
+		}
+
 		if (this.type == "number" || this.type == "range") {
 			return Number(this.field.value);
-		} else if(this.type == "date" || this.type == "datetime-local" || this.type == "month" || this.type == "week") {
+		} 
+
+		if (
+			this.type == "date" ||
+			this.type == "datetime-local" ||
+			this.type == "month" ||
+			this.type == "week"
+		) {
 			return new Date(this.field.value);
-		} else if(this.type == "checkbox") {
+		} 
+
+		if (this.type == "checkbox") {
 			let checked = this.field.checked;
 			if (this.field.hasAttribute("string")) {
 				if (!checked) {
 					return null;
 				}
-				return this.field.value
-			}
-			return checked;
-		} else {
 				return this.field.value;
 			}
+			return checked;
+		}
+
+		return this.field.value;
 	}
 }
 
@@ -57,7 +70,9 @@ class Serializer {
 	 * @returns {Serializer}
 	 */
 	constructor(element) {
-		let fields = element.querySelectorAll(`:scope input:not([type="submit"]), :scope select, :scope textarea, :scope group`);
+		let fields = element.querySelectorAll(
+			`:scope input:not([type="submit"]), :scope select, :scope textarea, :scope group`
+		);
 		let groups = [].slice.call(element.querySelectorAll(`:scope group`));
 
 		this.name = ":root";
@@ -81,13 +96,15 @@ class Serializer {
 	 */
 	addField(f) {
 		let fieldName = f.getAttribute("name");
-		let isArray = fieldName.match(/^\[(\d*)\]/)
+		let isArray = fieldName.match(/^\[(\d*)\]/);
 
-		fieldName = fieldName.replace(/^\[\d*\]/, '');
+		fieldName = fieldName.replace(/^\[\d*\]/, "");
+
+		console.log(f)
 
 		let field;
 		if (f.tagName == "GROUP") {
-			field = new Serializer(f)
+			field = new Serializer(f);
 		} else {
 			field = new SerializerField(f);
 		}
@@ -99,19 +116,19 @@ class Serializer {
 		field.name = fieldName;
 		field.parent = this;
 
-		f.serializer = field
+		f.serializer = field;
 
 		if (isArray) {
 			if (!this._fields.has(fieldName)) {
-				this._fields.set(fieldName, [])
+				this._fields.set(fieldName, []);
 			}
 			if (isArray[1] != "") {
-				this._fields.get(fieldName)[isArray[1]] = field
+				this._fields.get(fieldName)[isArray[1]] = field;
 			} else {
-				this._fields.get(fieldName).push(field)
+				this._fields.get(fieldName).push(field);
 			}
 		} else {
-			this._fields.set(fieldName, field)
+			this._fields.set(fieldName, field);
 		}
 	}
 
@@ -122,10 +139,10 @@ class Serializer {
 	 */
 	removeField(f) {
 		if (this._fields.has(f.name)) {
-			let fields = this._fields.get(f.name)
+			let fields = this._fields.get(f.name);
 			if (Array.isArray(fields)) {
 				let index = fields.indexOf(f);
-				this._fields.set(f.name, fields.splice(index, 1))
+				this._fields.set(f.name, fields.splice(index, 1));
 			} else {
 				this._fields.delete();
 			}
@@ -162,10 +179,10 @@ class Serializer {
 				let d = f.serialize();
 				if (f !== null) {
 					if (k == "") {
-						json = d
+						json = d;
 						continue;
 					}
-					json[k] = d
+					json[k] = d;
 				}
 			}
 		}
@@ -184,13 +201,13 @@ class Validator {
 	static validateRequired(field) {
 		let e = {
 			valid: true,
-			errors: {},
+			errors: {}
-		}
+		};
 		let v;
 		if (field instanceof Serializer) {
 			v = Validator.validateRequiredSerializer(field);
 		} else {
-			v = Validator.validateRequiredSerialzerField(field)
+			v = Validator.validateRequiredSerialzerField(field);
 		}
 		if (!v.valid) {
 			e.valid = false;
@@ -209,15 +226,15 @@ class Validator {
 	static validateRequiredSerializer(field) {
 		let e = {
 			valid: true,
-			errors: {},
+			errors: {}
-		}
+		};
 
 		let min = field.min;
 		let validFieldsCount = 0;
 		for (let [k, f] of field._fields) {
 			if (Array.isArray(f)) {
 				e.errors = {
-					message: null,
+					message: null
 				};
 				let validCount = 0;
 				for (let sf of f) {
@@ -225,20 +242,20 @@ class Validator {
 						e.errors[sf.name] = [];
 					}
 
-					let v = Validator.validateRequired(sf)
+					let v = Validator.validateRequired(sf);
 					if (!v.valid) {
-						console.log(e.errors)
+						console.log(e.errors);
 						e.errors[sf.name].push(v.errors);
 						continue;
 					}
-					validCount++
+					validCount++;
 				}
 
-				e.valid = min <= validCount
+				e.valid = min <= validCount;
 				if (e.valid) {
-					e.errors = {}
+					e.errors = {};
 				} else {
-					e.errors.message = `Should contain atleast ${min} value(s)`
+					e.errors.message = `Should contain atleast ${min} value(s)`;
 				}
 			} else {
 				let v = Validator.validateRequired(f);
@@ -262,16 +279,16 @@ class Validator {
 	static validateRequiredSerialzerField(field) {
 		let e = {
 			valid: true,
-			errors: {},
+			errors: {}
-		}
+		};
 
 		if (field.required || (field.parent && field.parent.required)) {
 			if (field.type != "checkbox") {
-				e.valid = field.field.validity.valueMissing !== true
+				e.valid = field.field.validity.valueMissing !== true;
-				e.errors = "Is required"
+				e.errors = "Is required";
 			} else {
-				e.valid = field.field.checked
+				e.valid = field.field.checked;
-				e.errors = "Not checked"
+				e.errors = "Not checked";
 			}
 		}
 		return e;

tests/main.go

@@ -24,6 +24,10 @@ var testData = []*Person{
 		Surname:   "Bar",
 		Age:       57,
 		BirthDate: time.Date(1960, 1, 1, 0, 0, 0, 0, time.UTC),
+		Animal:    "Dog",
+		Checklist: []string{
+			"Milk",
+		},
 	},
 	nil,
 	&Person{
@@ -32,22 +36,26 @@ var testData = []*Person{
 		Age:       22,
 		BirthDate: time.Date(1995, 1, 5, 0, 0, 0, 0, time.UTC),
 		Languages: []Language{
-			Language{
+			{
 				Language:   "Dutch",
 				SkillLevel: 9.99,
 				Native:     true,
 			},
-			Language{
+			{
 				Language:   "English",
 				SkillLevel: 8.4,
 				Native:     false,
 			},
-			Language{
+			{
 				Language:   "Japanese",
 				SkillLevel: -9000.9,
 				Native:     false,
 			},
 		},
+		Animal: "Dog",
+		Checklist: []string{
+			"Milk",
+		},
 	},
 }
 
@@ -84,9 +92,11 @@ type Person struct {
 	Age       int        `json:"age"`
 	BirthDate time.Time  `json:"birth_date"`
 	Languages []Language `json:"languages"`
+	Checklist []string   `json:"checklist"`
+	Animal    string     `json:"animal"`
 }
 
-// Languages ...
+// Language ...
 type Language struct {
 	Language   string  `json:"language"`
 	SkillLevel float64 `json:"skill_level"`
@@ -129,14 +139,21 @@ func isEq(p1, p2 Person) {
 	assert(p1.Surname, p2.Surname, "Surname")
 	assert(p1.Age, p2.Age, "Age")
 	assert(p1.BirthDate, p2.BirthDate, "BirthDate")
+	assert(p1.Animal, p2.Animal, "Animal")
 	if !assert(len(p2.Languages), len(p1.Languages), "Languages length") {
 		return
 	}
+	if !assert(len(p2.Checklist), len(p1.Checklist), "Checklist length") {
+		return
+	}
 	for k := range p2.Languages {
 		assert(p1.Languages[k].Language, p2.Languages[k].Language, "Languages.Language")
 		assert(p1.Languages[k].SkillLevel, p2.Languages[k].SkillLevel, "Languages.SkillLevel")
 		assert(p1.Languages[k].Native, p2.Languages[k].Native, "Languages.Native")
 	}
+	for k := range p2.Checklist {
+		assert(p1.Checklist[k], p2.Checklist[k], "Checklist")
+	}
 }
 
 func assert(v, v2 interface{}, ident string) bool {

tests/templates/test.gohtml

@@ -32,6 +32,14 @@
 								<input name="skill_level" type="number" value="{{ .SkillLevel }}">
 							</group>
 						{{ end }}
+						<select multiple name="checklist">
+							<option selected value="Milk">Milk</option>
+							<option value="Eggs">Eggs</option>
+						</select>
+						<select name="animal">
+							<option value="Dog" selected>Dog</option>
+							<option value="Cat">Cat</option>
+						</select>
 					</group>
 				{{ end }}
 			{{ end }}