dijit.form.Form

Status:Draft
Version:1.0
Available:since V?

dijit.form.Form is the dijit equivalent of the <form> node, and it provides various methods for serializing/deserializing form data, and checking whether or not a form is valid.

Examples

Declarative example

<script>
    dojo.require("dijit.form.Form");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.ValidationTextBox");
    dojo.require("dijit.form.DateTextBox");
</script>
<div dojoType="dijit.form.Form" id="myForm" jsId="myForm"
encType="multipart/form-data" action="" method="">
    <script type="dojo/method" event="onReset">
        return confirm('Press OK to reset widget values');
    </script>

    <script type="dojo/method" event="onSubmit">
        console.debug('Attempting to submit form w/values:\n',
            dojo.toJson(this.getValues(), true));
        if(this.validate()){
            return confirm('Form is valid, press OK to submit');
        } else {
            alert('Form contains invalid data.  Please correct first');
            return false;
        }
        return true;
    </script>

    <script type="dojo/method" event="onReset">
        return confirm('reset Form?');
    </script>

    <table style="border: 1px solid #9f9f9f;" cellspacing="10">
        <tr>
            <td>
                <label for="name">Name:
            </td>
            <td>
                <input type="text" id="name" name="name" required="true" dojoType="dijit.form.ValidationTextBox"/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="dob">Date of birth:
            </td>
            <td>
                <input type="text" id="dob" name="dob" dojoType="dijit.form.DateTextBox"/>
            </td>
        </tr>
    </table>

    <button dojoType="dijit.form.Button" onClick="console.log(myForm.getValues())">Get Values from form!</button>
    <button dojoType="dijit.form.Button" type="submit" name="submitButton" value="Submit">Submit</button>
    <button dojoType="dijit.form.Button" type="reset">Reset</button>
</div>

Note that it’s using a <div> node instead of the obvious choice of a <form> node because of some IE issues

Preparing and validating a form for XHR requests

To validate a form you use the isValid() function. Lets take at a simple example using a declaratively created form:

<script>
    dojo.require("dijit.form.Form");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.ValidationTextBox");
    dojo.require("dijit.form.DateTextBox");

    dojo.addOnLoad(function(){
        var myForm = dijit.byId("myFormTwo");
        dojo.connect(myForm, "onSubmit", function(e){
            e.preventDefault();
            if (myForm.isValid()){
                alert("Ready to submit data: "+dojo.toJson(myForm.attr("value")) );
            }
        });
    });
</script>
<div dojoType="dijit.form.Form" id="myFormTwo" jsId="myFormTwo"
encType="multipart/form-data" action="" method="">
    <table style="border: 1px solid #9f9f9f;" cellspacing="10">
        <tr>
            <td>
                <label for="name">Name:
            </td>
            <td>
                <input type="text" name="name" required="true" dojoType="dijit.form.ValidationTextBox"/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="dob">Date of birth:
            </td>
            <td>
                <input type="text" name="dob" dojoType="dijit.form.DateTextBox"/>
            </td>
        </tr>
    </table>

    <button dojoType="dijit.form.Button" onClick="console.log(myFormTwo.attr("value"))">Get Values from form!</button>
    <button dojoType="dijit.form.Button" type="submit" name="submitButtonTwo" value="Submit">Submit</button>
    <button dojoType="dijit.form.Button" type="reset">Reset</button>
</div>

Using native form elements

dijit.form.Form can also handle any type of naive form element, though you have to do validation yourself

<script>
    dojo.require("dijit.form.Form");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.ValidationTextBox");
    dojo.require("dijit.form.DateTextBox");

    dojo.addOnLoad(function(){
        var myForm = dijit.byId("myFormThree");
        dojo.connect(myForm, "onSubmit", function(e){
            e.preventDefault();
            alert("Ready to submit data: "+dojo.toJson(myForm.attr("value")) );
        });
    });
</script>
<div dojoType="dijit.form.Form" id="myFormThree" jsId="myFormThree"
encType="multipart/form-data" action="" method="">
    <table style="border: 1px solid #9f9f9f;" cellspacing="10">
        <tr>
            <td>
                <label for="name">Name:
            </td>
            <td>
                <input type="text" name="name" required="true" dojoType="dijit.form.ValidationTextBox"/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="dob">Date of birth:
            </td>
            <td>
                <input type="text" name="dob" dojoType="dijit.form.DateTextBox" />
            </td>
        </tr>
        <tr>
            <td>
                <label for="dob">Order
            </td>
            <td>
                <input type="radio" name="order" value="Food"> Food
                <input type="radio" name="order" value="Drinks" checked> Drinks
            </td>
        </tr>
    </table>

    <button dojoType="dijit.form.Button" onClick="console.log(myFormThree.attr("value"))">Get Values from form!</button>
    <button dojoType="dijit.form.Button" type="submit" name="submitButtonThree" value="Submit">Submit</button>
    <button dojoType="dijit.form.Button" type="reset">Reset</button>
</div>