HTML 5 Input

scottjones

Hi all,

I have been working on the following custom HTML 5 input fieldtype for Editor:
[code]
//custom html 5 input:
$.fn.DataTable.Editor.fieldTypes.html5input = $.extend( true, {}, $.fn.DataTable.Editor.models.fieldType, {
// Create the HTML mark-up needed for input and add any event handlers needed
"create": function ( conf ) {
var that = this;
var inputString = \'

allan

Very nice! Thanks for sharing this with us :-).

Based upon the information here ( http://stackoverflow.com/questions/5688122/html5-form-validation-void-form-action-and-execute-jquery-when-all-html5-form-e ) you could use the onPreSubmit handler to 'submit' the form, but also to cancel the submit - allowing it only to do the validation.

The other method (I'm assuming a little bit here) is I guess that HTML5 input elements have a 'valid' or similar property - you could loop over your fields checking for that and cancel submission based on those values.

Regards,
Allan

scottjones

OK im trying the onPreSubmit using the following code snippet:
[code]
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "'.AJAX_URL.'",
"events": {
"onPreSubmit": function (data) {
data.XID = "'.XID_SECURE_HASH.'";
$("form").submit(function(e){
alert("Submitted");
});
}
}
[/code]

but im not getting the alert.. any ideas?

allan

You've attached a submit event handler there, but you also need to actually submit the form:

[code]
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "'.AJAX_URL.'",
"events": {
"onPreSubmit": function (data) {
data.XID = "'.XID_SECURE_HASH.'";
$("form").submit(function(e){
alert("Submitted");
}).submit();
}
}
[/code]

Should do it.

Allan

allan

Oh - and remember to add a 'preventDefault' or it will actually submit the form!

scottjones

ok i think im getting there, is there a way to spcifically get the Editor form? i notice it doesn't have any ID's or names on the form and doing $('form') is getting all forms on the page.. cant see anything in the api though..

allan

It is a little obscure without the full source, but you can use

[code]
this.dom.form
[/code]

to get the 'form' element. I'm actually a little surprised this isn't in the automatically generated documentation. I'll look into that.

Allan

scottjones

OK so after more investigation you cannot force the browsers validation UI via javascript (the errors that popup)

It also seems that submitting the form via javascript bypasses the browsers validation UI thus being completely pointless.

I will leave this plugin here as it offers HTML5 functionality (Min, Max, Autofocus, autocomplete, etc); however there will be no HTML5 validation unless the create/update buttons are turned to actual submit buttons for the browser to verify. or someone with a lot better skills than i can force it.

Currently if you did the validation in JS you might as well do it server side, so the whole thin is kinda moot.. nice exercise though..