libs/cbi: implement realtime client side input validation for Value and DynamicList fields

libs/cbi/htdocs/luci-static/resources/cbi.js

@@ -304,6 +304,9 @@ function cbi_combobox(id, values, def, man) {
 	var sel = document.createElement("select");
 	sel.id = selid;
 	sel.className = 'cbi-input-select';
+	if (obj.className && obj.className.match(/cbi-input-invalid/)) {
+		sel.className += ' cbi-input-invalid';
+	}
 	if (obj.nextSibling) {
 		obj.parentNode.insertBefore(sel, obj.nextSibling);
 	} else {
@@ -351,6 +354,8 @@ function cbi_combobox(id, values, def, man) {
 			obj.focus();
 		} else {
 			obj.value = sel.options[sel.selectedIndex].value;
+			sel.className = (!obj.validate || obj.validate())
+				? 'cbi-input-select' : 'cbi-input-select cbi-input-invalid';
 		}
 
 		try {
@@ -447,43 +452,63 @@ function cbi_t_update() {
 }
 
 
-function cbi_validate_disable_form(form, onoff)
+function cbi_validate_form(form, errmsg)
 {
-	for( var i = 0; i < form.elements.length; i++ )
+	if( form.cbi_validators )
 	{
-		if( form.elements[i].type == 'submit' )
+		for( var i = 0; i < form.cbi_validators.length; i++ )
 		{
-			form.elements[i].disabled = onoff;
+			var validator = form.cbi_validators[i];
-			break;
+			if( !validator() && errmsg )
+			{
+				alert(errmsg);
+				return false;
 			}
 		}
+	}
+
+	return true;
 }
 
-function cbi_validate_field(type, optional, field)
+function cbi_validate_reset(form)
 {
+	window.setTimeout(
+		function() { cbi_validate_form(form, null) }, 100
+	);
+
+	return true;
+}
+
+function cbi_validate_field(cbid, optional, type)
+{
+	var field = document.getElementById(cbid);
+	var vldcb = cbi_validators[type];
+
+	if( field && vldcb )
+	{
+		var validator = function(reset)
+		{
 			field.className = field.className.replace(/ cbi-input-invalid/g, '');
 
-	var vldcb = cbi_validators[type];
+			// validate value
-	if( vldcb )
-	{
 			var value = (field.options) ? field.options[field.options.selectedIndex].value : field.value;
-
+			if( !(((value.length == 0) && optional) || vldcb(value)) )
-		if( ((value.length == 0) && optional) || vldcb(value) )
 			{
-			// OK
+				// invalid
-			cbi_validate_disable_form(field.form, false);
-		}
-		else
-		{
-			// Invalid
 				field.className += ' cbi-input-invalid';
-			cbi_validate_disable_form(field.form, true);
+				return false;
 			}
-	}
+
-	else
+			return true;
-	{
+		};
-		// OK
+
-		cbi_validate_disable_form(field.form, false);
+		if( ! field.form.cbi_validators )
+			field.form.cbi_validators = [ ];
+
+		field.form.cbi_validators.push(validator);
+		field.onblur = field.onkeyup = field.validate = validator;
+
+		validator();
 	}
 }
 

libs/cbi/luasrc/view/cbi/header.htm

@@ -1,7 +1,7 @@
 <%#
 LuCI - Lua Configuration Interface
 Copyright 2008 Steven Barth <steven@midlink.org>
-Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
+Copyright 2008-2010 Jo-Philipp Wich <xm@subsignal.org>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,7 +14,7 @@ $Id$
 -%>
 
 <%+header%>
-<form method="post" name="cbi" action="<%=REQUEST_URI%>" enctype="multipart/form-data">
+<form method="post" name="cbi" action="<%=REQUEST_URI%>" enctype="multipart/form-data" onreset="return cbi_validate_reset(this)" onsubmit="return cbi_validate_form(this, '<%:Some fields are invalid, cannot save values!%>')">
 	<div>
 		<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
 		<input type="hidden" name="cbi.submit" value="1" />

libs/cbi/luasrc/view/cbi/value.htm

@@ -1,7 +1,7 @@
 <%#
 LuCI - Lua Configuration Interface
 Copyright 2008 Steven Barth <steven@midlink.org>
-Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
+Copyright 2008-2010 Jo-Philipp Wich <xm@subsignal.org>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,8 +15,9 @@ $Id$
 <%+cbi/valueheader%>
 	<input type="<%=self.password and 'password" class="cbi-input-password' or 'text" class="cbi-input-text' %>" onchange="cbi_d_update(this.id)"<%= attr("name", cbid) .. attr("id", cbid) .. attr("value", self:cfgvalue(section) or self.default) .. ifattr(self.size, "size")%> />
 	<% if self.password then %><img src="<%=resource%>/cbi/reload.gif" style="vertical-align:middle" title="<%:Reveal/hide password%>" onclick="var e = document.getElementById('<%=cbid%>'); e.type = (e.type=='password') ? 'text' : 'password';" /><% end %>
-	<% if #self.keylist > 0 then -%>
+	<% if #self.keylist > 0 or self.datatype then -%>
 	<script type="text/javascript">
+		<% if #self.keylist > 0 then -%>
 		cbi_combobox_init('<%=cbid%>', {
 		<%-
 			for i, k in ipairs(self.keylist) do
@@ -34,6 +35,10 @@ $Id$
 		<%- else -%>
 			<%-: -- custom -- -%>
 		<%- end -%>');
+		<%- end %>
+		<% if self.datatype then -%>
+		cbi_validate_field('<%=cbid%>', <%=tostring(self.optional == true)%>, '<%=self.datatype%>');
+		<%- end %>
 	</script>
 	<% end -%>
 <%+cbi/valuefooter%>