JavaScript DHTML/SmartClient/Form Validation

Содержание

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

Bounded Length Range Validation

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"boundedLengthRange", 
      title:"lengthRange 4-8",
      validators:[
         {
            type:"lengthRange", 
            errorMessage:"Value must be 4-8 characters long.", 
            min:4, 
            max:8
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       boundedLengthRange:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Conditional required field

   <source lang="html4strict">

 <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/system/modules/ISC_Calendar.js></SCRIPT>
 <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>

</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.DynamicForm.create({

   ID: "exampleForm",
   width: 250,
   titleOrientation: "top",
   fields: [
       {name: "willAttend",
        type: "radioGroup",
        colSpan: "*",
        required: true,
        vertical: false,
        valueMap: ["Yes", "No"],
        redrawOnChange:true,
        title: "Will you be attending the meeting on April 4th? If no, please provide a reason"
       },
       {name: "reason",
        type: "text",
        title: "Reason",
        validators : [{
           type: "requiredIf",
           expression: "exampleForm.getValue("willAttend") == "No"",
           errorMessage: "Please provide a reason"
        }]
       },
       {name: "validate",
        title: "Validate",
        type: "button",
        click: "form.validate()"
       }
   ]

});

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

 </source>

Confirmation based field validation

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"custom", 
      title:"custom - confirm dialog",
      validators:[
         {
            condition:"confirm("Accept the value \""+value+"\" for custom field?")",
            errorMessage:"Custom Field Value Rejected", clientOnly:true
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       custom:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Integer field

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"isInteger", 
      title:"isInteger",
      validators:[
         {
            type:"isInteger", 
            errorMessage:"Value must be an integer."
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       isInteger:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Integer value range field

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"boundedIntegerRange", 
      type:"integer", 
      title:"integerRange 10-100",
      validators:[
         {
            type:"integerRange", 
            errorMessage:"Value must be between 10 and 100.", 
            min:10, 
            max:100
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       boundedIntegerRange:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Lower Bounded Integer Range

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"lowerBoundedIntegerRange", 
      type:"integer", 
      title:"integerRange 10-",
      validators:[
         {
            type:"integerRange", 
            errorMessage:"Value must be >= 10.", 
            min:10
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       lowerBoundedIntegerRange:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Lower Bounded Length Range Validation

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"lowerBoundedLengthRange", 
      title:"lengthRange 4-",
      validators:[
         {
            type:"lengthRange", 
            errorMessage:"Value must be 4 or more characters long.", 
            min:4
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       lowerBoundedLengthRange:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Mark field as required

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"required", 
      title:"required", 
      required:true
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       custom:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Must be a boolean value

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"isBoolean", 
      title:"isBoolean",
      validators:[
         {
            type:"isBoolean", 
            errorMessage:"Value must be boolean."
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       isBoolean:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Must match field validation

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"upperBoundedLengthRange", 
      title:"lengthRange -8",
      validators:[
         {
            type:"lengthRange", 
            errorMessage:"Value must be 8 or fewer characters long.", 
            max:8
         }
      ]
   },
   {
      name:"matchesField", 
      title:"matchesField - field 1",
      validators:[
         {
            type:"matchesField", 
            errorMessage:"Value must match value of first field.", 
            otherField:"required"
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       matchesField:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Regexp validation

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"regexp", 
      title:"regexp zipcode format",
      validators:[
         {
            type:"regexp", 
            errorMessage:"Value must be in zipcode format.", 
            expression:/^\d{5}(-\d{4}){0,1}$/
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       contains:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Required field and hint

   <source lang="html4strict">

 <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>

 Form item annotations example

 Isomorphic SmartClient

<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>

 </source>

Substring Count Validation

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"substringCount", 
      title:"substringCount "." == 3",
      validators:[
         {
            type:"substringCount", 
            errorMessage:"Value must contain exactly three dots.", 
            substring:".",
            operator:"==", count:3
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       contains:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Upper Bounded Integer Range

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"upperBoundedIntegerRange", 
      type:"integer", 
      title:"integerRange -100",
      validators:[
         {
            type:"integerRange", 
            errorMessage:"Value must be <= 100.", 
            max:100
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       upperBoundedIntegerRange:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Upper Bounded Length Range Validation

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"upperBoundedLengthRange", 
      title:"lengthRange -8",
      validators:[
         {
            type:"lengthRange", 
            errorMessage:"Value must be 8 or fewer characters long.", 
            max:8
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       upperBoundedLengthRange:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Validation type: requiredIf

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"requiredIf", 
      title:"requiredIf - true",
      validators:[
         {
             type:"requiredIf", 
             errorMessage:"Value must be non-empty.", 
             expression:"true"
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       requiredIf:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Value must be one of

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"isOneOf", 
      title:"isOneOf ["a","b","c"]",
      validators:[
         {
            type:"isOneOf", 
            errorMessage:"Value must be one of ["a","b","c"].", 
            list:["a","b","c"]
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       isOneOf:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Value must contain the substring

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"contains", 
      title:"contains "abc"",
      validators:[
         {
            type:"contains", 
            errorMessage:"Value must contain the substring "abc".", 
            substring:"abc"
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       contains:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

Value must not contain any spaces

   <source lang="html4strict">

 <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> <SCRIPT> var formItems = [

   {
      name:"doesntContain", 
      title:"doesntContain " "",
      validators:[
         {
            type:"doesntContain", 
            errorMessage:"Value must not contain any spaces.", 
            substring:" "
         }
      ]
   },
   {
      type:"rowSpacer"},
   // Submit button for form - will perform automatic client side validation before submission
   // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission.
   // {title:"Submit Form", type:"submit", align:"center"}
   // Button to call validation demonstration function
   {title:"Validate Form", type:"button", click:"validateForm()", align:"center"}
   ],

   formValues = {
       contains:"x",
   };

DynamicForm.create({

   ID:"simpleForm",
   left:20,
   top:40,
   items:formItems,
   values:formValues,
   width:600,
   titleWidth:200

});

// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){

   if(simpleForm.validate()){
   alert ("Form validation was successful!");
   simpleForm.redraw();
   };

}; </SCRIPT> </BODY> </HTML>

 </source>

JavaScript DHTML/SmartClient/Form Validation

Содержание

Bounded Length Range Validation

Conditional required field

Confirmation based field validation

Integer field

Integer value range field

Lower Bounded Integer Range

Lower Bounded Length Range Validation

Mark field as required

Must be a boolean value

Must match field validation

Regexp validation

Required field and hint

Substring Count Validation

Upper Bounded Integer Range

Upper Bounded Length Range Validation

Validation type: requiredIf

Value must be one of

Value must contain the substring

Value must not contain any spaces

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты