Here is an enhanced version which automatically invalidates fields based on the html5 validation rules. There are only two caveats for using this:
a) This requires jQuery additionally
b) As of 3.2.4 webix does not add the name attribute to some input field. For now you have to do some ugly fix as described here: http://forum.webix.com/discussion/6734/bug-in-text-component
Here’s the new h5form:
if (typeof webix === ‘undefined’) {
throw new Error(‘h5form requires webix’);
}
if (typeof jQuery === ‘undefined’) {
throw new Error(‘h5form requires jQuery’);
}
webix.protoUI({
name:‘h5form’,
_default_height:-1,
_form_classname:“webix_form”,
_form_vertical:true,
defaults:{
type:“form”,
autoheight:true
},
$init:function(config){
var oldobj = this._viewobj;
this._contentobj = this._viewobj = webix.html.create("FORM",{
'class':'webix_view webix_form webix_custom_h5form',
'action': 'javascript:0;',
});
while(oldobj.childNodes.length > 0) {
this._viewobj.appendChild(oldobj.childNodes[0]);
}
this.$view = this._viewobj;
var self = this;
config.elementsConfig = config.elementsConfig || {};
config.elementsConfig.on = config.elementsConfig.on || {};
var savedOnChange = config.elementsConfig.on.onChange;
config.elementsConfig.on.onChange = function(newV, oldV) {
if (typeof savedOnChange === 'function')
savedOnChange.call(this, newVm, oldV);
if (!self._validateFormRule(this.$view))
return;
this.validate();
}
config.rules = config.rules || {};
if (typeof config.rules.$all === 'function') {
var savedAllRule = config.rules.$all;
config.rules.$all = function(newV, oldV, fieldName) {
return self._validateFormRule(this.$view, fieldName) && savedAllRule.call(this, arguments);
}
}
else
{
config.rules.$all = function(newV, oldV, fieldName) {
return self._validateFormRule(this.$view, fieldName);
}
}
$(this.$view).on('submit', function(e) {
if (this.checkValidity && !this.checkValidity()) {
self._validateFormRule();
$(self.$view).find(':invalid').first().focus();
}
e.preventDefault();
return false;
});
},
_validateFormRule: function(root, fieldName) {
var self = this;
root = root || this.$view;
if (!this.$view.checkValidity || this.$view.checkValidity()) {
return true;
}
var status = true;
// Find all invalid fields within the form.
$(root).find((fieldName?'[name='+fieldName+']' : '')+':invalid').each(function(index, node) {
var name = $(node).attr('name');
var mesg = (node.validationMessage || 'Please check your input.');
if ($(node).is('[title]'))
mesg += ' '+$(node).attr('title');
if (name && name.length) {
self.markInvalid(name, mesg);
}
status = false;
});
return status;
},
$getSize:function(dx, dy){
if (this._scroll_y && !this._settings.width) dx += webix.ui.scrollSize;
var sizes = webix.ui.layout.prototype.$getSize.call(this, dx, dy);
if (this._settings.scroll || !this._settings.autoheight){
sizes[2] = this._settings.height || this._settings.minHeight || 0;
sizes[3] += 100000;
}
return sizes;
}
}, webix.ui.toolbar);