I would like to generate a QR code based on the field roll number and display it in a div container with id named "vyas_qrcode" using a javascript file(client side validation).

The 3 files I have created are,

    from osv import osv,fields
    
        class qrcode_clientside(osv.osv):
    
            _name = 'qrcode.clientside' # Name of the table.
    
            _columns = {
    
            'name': fields.char("Name", size=64, requried=True),    # Name of the person. The name should be between 5 and 10 characters and must not contain symbols . How to do this with the javascript file(qrcode_js.js)
            'roll_number': fields.integer("Roll Number", required=True),    # Roll number of the person.
            }

Then the xml file qrcode_js.xml

        <?xml version="1.0" encoding="utf-8" ?>
    <openerp>
        <data>
    
            <record model="ir.actions.act_window" id="action_qrcode_clientside">
                <field name="name">QRCode Generation</field>
                <field name="res_model">qrcode.clientside</field>
                <field name="view_type">form</field>
                <field name="view_mode">tree,form</field>
            </record>
    
            <menuitem name="QR Code JS" id="qrcode_js_menu" sequence="10" />
            <menuitem name="QR Code Side Menu" id="qrcode_js_sidemenu" parent="qrcode_js_menu" sequence="3" />
            <menuitem name="QR Code Generator" id="qrcode_js_finalmenu" parent="qrcode_js_sidemenu" sequence="4" action="action_qrcode_clientside" />
    
            <record model="ir.ui.view" id="view_qrcode_clientside_form" >
                <field name="name">qrcode.clientside Form View</field>
                <field name="model">qrcode.clientside</field>
                <field name="arch" type="xml">
                    <form string="QRCode Clientside Generation" version="7.0">
                        <sheet>
                            <group>
                                <group>
                                    <field name="name" /> <!-- The name should be between 5 and 10 characters and must not contain symbols . How to do this with the javascript file(qrcode_js.js).-->
                                    <field name="roll_number" class="roll_number_class" />
                                 </group>
                                 <group>
                                    <div id="vyas_qrcode" width="100" height="75" >    <!-- This is where the QR Code should be generated. It should have the value of the Roll number of the person. -->
                                            QR Code Placeholder
                                    </div>
                                </group>
                        </group>
                         </sheet>
                    </form>
                </field>
            </record>
    
    
            <record model="ir.ui.view" id="view_qrcode_clientside_tree" >
                <field name="name">qrcode.clientside Tree View</field>
                <field name="model">qrcode.clientside</field>
                <field name="arch" type="xml">
                    <field name="name" />
                    <field name="roll_number" />
                </field>
            </record>
    
    
        </data>
    </openerp>

Then the Javascript file qrcode_js.js .

    openerp.js_qrcode_vyas = function(instance){

    instance.js_qrcode_vyas = {};

    alert("Inside the main function ");

    instance.js_qrcode_vyas.qrcode_clientside = instance.web.Widget.extend({

    init: function(parent, name){
        console.log("qrcode_clientside page has been loaded.");
    },

    start: function(){
        this.$el.append('
            <script type="text/javascript" src="js_qrcode_vyas/static/src/js/jquery.qrcode.min.js"></script>
            <script>
                    $(document).ready(function(){
                            rollnumber_from_field = $(".roll_no_class").text();     // Getting the value of Roll Number from the roll_number field.
                            qroptions = { width: 40,height: 40, text:rollnumber_from_field  , size: 100, render:"image" }; // To pass arguments to get the QR code.
                            setTimeout(function(){$("#vyas_qrcode").qrcode(qroptions);}, 4000); // Generating the QR code and displaying it after a delay of 4 seconds.
                            });

            </script>
            ');

    },
    });
    };

1. The Logic for QR code generation is inside the js file(qrcode_js.js) in start: function () inside, this.$el.append(). The code inside the append works when typing inside chromes console but shows error here in this file saying '<' un-expected. 

2. I tried putting this logic directly inside the xml but it loads even before the page and dom is loaded and so the qrcode is generated but with empty values.

3. I know that I am supposed to put it inside the "start: function() " which refers to the page and DOM being loaded but am not sure about how to go from there.

4. I would also like to know how to validate field "name" and make it such that it has between 5 and 10 characters and also it should not contain symbols. And I don't want to do this from the python file but from the client side, either in the "init: function()" or the "start: function()" .  

5. And Thanks to everybody for taking your valuable time to help me out.