onsubmit validation option of infragistics igeditor not working

Question

Here is the scenario I have a html page as

<form id="form">

<table id="formtable">
 <tr>
 <td id="label1">
 <td id="editor1">
 </tr> 

 <tr>
 <td id="label2">
 <td id="editor2">
 </tr> 

</table>

<input type="button" value="Save" id="save"/>

</form>

and at script side i am declaring and appending to the table elements

var label1 = document.createElement('label');
var input1 = $('<input id="txt1"/>');

var label2 = document.createElement('label');
var input2 = $('<input id="txt2"/>');

label1.innerHTML = "First Name";
label2.innerHTML = "Last Name";   

$(input1).igEditor({
                width: 140,
                required:true,
                validatorOptions: 
                             {
                            onchange: false,
                            formSubmit: true,                            
                             }
            });

$(input2).igEditor({
                width: 140,
                required:true,
                validatorOptions: 
                             {
                            onchange: false,
                            formSubmit: true,                            
                             }
            });
$("#label1").append(label1);
$("#label2").append(label2);
$("#editor1").append(input1);
$("#editor2").append(input2);

and on the save click i am writing the code as

$('#save').click(function () {
         $('#form').submit();

});

but on form submitting validation error messages are not being displayed and form is submitted. Rest other validations like onchange and onblur are working. Can anybody help me with this plz????

Answer 1

I'm willing to bet the igValidator has has a hard time attaching to the form submit event because you create the editors in the document fragments (via jQuery) that are not yet inside the DOM, let alone inside a form to bind to. Simple solution though - if you insist on creating the inputs via JS, attach them before intializing the igEditors:

Fiddle: http://jsfiddle.net/damyanpetev/U9SJP/

$("#label1").append(label1);
$("#label2").append(label2);

$(input1).igEditor({
    width: 140,
    required: true,
    validatorOptions: {
        onchange: true,
        formSubmit: true
    }
});

Remember there's yet another submit option (using input tag of type submit) that is handled separately - there's a very elaborate sample on what Editor options do .