JQuery MiniUI Quick Start: form development (4)

Form development includes layout, verification, loading, submission, clearing, and resetting.
As follows:


Form Layout
Use HTML Table tags to implement any rich form layout:
<Table class = "form-table" border = "0" cellpadding = "1" cellspacing = "2">
<Tr>
<Td class = "form-label" style = "width: 60px;"> name: </td>
<Td style = "width: 150px">
<Input name = "name" class = "mini-textbox"/> </td>
<Td class = "form-label" style = "width: 60px;"> address: </td>
<Td style = "width: 150px">
<Input name = "addr" class = "mini-textbox"/> </td>
</Tr>
<Tr>
<Td class = "form-label"> Gender: </td>
<Td>
<Input name = "gender" class = "mini-radiobuttonlist" data = "[{id: 1, text: 'male'}, {id: 2, text: female}] "/> </td>
<Td class = "form-label"> Age: </td>
<Td> <input name = "age" class = "mini-spinner"/> </td>
</Tr>
<Tr>
<Td class = "form-label"> Note: </td>
<Td colspan = "3">
<Input name = "remarks" class = "mini-textarea" style = "width: 343px; height: 60px;"/> </td>
</Tr>
</Table>

Data Verification
Listen to the "validation" event of the control, and customize the verification rules and error description information:
<Input id = "username" name = "username" onvalidation = "onUserNameValidation" class = "mini-textbox" required = "true"/>
Function onUserNameValidation (e ){
If (e. isValid ){
If (isEmail (e. value) = false ){
E. errorText = "the email address must be entered ";
E. isValid = false;
}
}
}
Use the mini. Form component to verify multiple controls:
Var form = new mini. Form ("# form1 ");
Form. validate ();
Load Form

$. Ajax ({
Url: "../data/FormService. aspx? Method = LoadData ",
Type: "post ",
Success: function (text ){
Var data = mini. decode (text); // deserialize the object
Form. setData (data); // you can specify multiple controls.
}
});
Submit Form

// Submit form data

Var form = new mini. Form ("# form1 ");
Var data = form. getData (); // obtain the data of multiple controls in the form.
Var json = mini. encode (data); // serialize to JSON
$. Ajax ({
Url: "../data/FormService. aspx? Method = SaveData ",
Type: "post ",
Data: {submitData: json },
Success: function (text ){
Alert ("submitted successfully, returned result:" + text );
}
});
Clear form
Form. clear ();
 
Reset form
Form. reset ();