Required field and hint : Form Validation « SmartClient « JavaScript DHTML






Required field and hint

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.

Open Source License

SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html

If your project precludes the use of this license, or if you'd like to support SmartClient LGPL, 
we encourage you to buy a commercial license.

Icon Experience Collection

Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.com) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.

All other media found under the isomorphic/skins directory may be used under the LGPLv3.

Commercial Licenses

A number of commercial licenses are available for purchase. Please see http://smartclient.com/license.

Warranty Disclaimer

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.

Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 


-->

<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->


<HTML><HEAD>
  <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR='papayawhip' MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>

  Form item annotations example

</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>

  Isomorphic SmartClient

</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>


<!--------------------------
  Example code starts here
---------------------------->

<SCRIPT>

var formItems = [
       {
          type:"header", 
          defaultValue:"Item title and hint"
       },
       {
          type:"rowSpacer"
       },
       {
          name:"titleHint", 
          title:"title text", 
          hint:"hint text"
       },
       {
          type:"rowSpacer"
       },
       {
          type:"header", 
          defaultValue:"Item title and hint (required field)"
       },
       {
          type:"rowSpacer"
       },
       {
          name:"titleHintReq", 
          title:"title text", 
          hint:"hint text", 
          required:true
       },
       {
          type:"rowSpacer"
       },
       {
          type:"header", 
          defaultValue:"Item title, hint, and error"
       },
       {
          type:"rowSpacer"
       },
       {
          name:"titleHintError", 
          title:"title text", 
          hint:"hint text"
       },
       {
          type:"rowSpacer"
       },
       {
          type:"rowSpacer"
       },
       {
          type:"header", 
          defaultValue:"Item title and hint example (required field)"
       },
       {
          type:"rowSpacer"
       },
       {
          name:"titleHintExample", 
          title:"Password", 
          type:"password", 
          hint:"4-12 alphanumeric characters", 
          required:true
       },
       {
          type:"rowSpacer"
       },
    
       {
          type:"header", 
          defaultValue:"Item title, hint, and error example (required field)"
       },
       { 
          type:"rowSpacer"
       },
       {
          name:"titleHintErrorExample", 
          title:"Password", type:"password", 
          hint:"4-12 alphanumeric characters", 
          required:true
       }
    ],

    formValues = {
        titleHint:"value",
        titleHintReq:"value",
        titleHintError:"value",
        titleHintExample:"xxx",
        titleHintErrorExample:"xxx"
    },
    
    formErrors = {
        titleHintError:"error text",
        titleHintErrorExample:"Your password must be at least 4 characters long."
    };
    
DynamicForm.create({
    ID:"dynform",
    left:20,
    top:45,
    width:600,
    items:formItems,
    values:formValues,
    errors:formErrors
});

</SCRIPT>
</BODY>
</HTML>

   
  








Related examples in the same category

1.Validation type: requiredIf
2.Must be a boolean value
3.Integer field
4.Integer value range field
5.Lower Bounded Integer Range
6.Upper Bounded Integer Range
7.Bounded Length Range Validation
8.Lower Bounded Length Range Validation
9.Upper Bounded Length Range Validation
10.Must match field validation
11.Value must be one of
12.Value must contain the substring
13.Value must not contain any spaces
14.Substring Count Validation
15.Regexp validation
16.Conditional required field
17.Mark field as required
18.Confirmation based field validation