Difference between revisions of "JavaScript Validation"

From SmartWiki
Jump to: navigation, search
(To limit the amount of characters that can be entered into a field)
 
(64 intermediate revisions by 9 users not shown)
Line 1: Line 1:
==Validation Options==
+
{| class="wikitable"
 +
|-
 +
|[[Image:How.png|50px|link=]]
 +
|This article will explain '''how''' you can implement this feature for use on your SmartSimple system.
 +
|}
  
Other than Numeric, Alphabetic, Date and Allow Empty, [[User|users]] can define their own validation or criteria for a [[Custom Fields|custom field]] by creating a user-defined validation based on JavaScript syntax.
+
{{JavaScript Syntax}}
 +
__TOC__
  
==To have a [[Custom Fields|custom field]] only accept certain values==
+
In addition to the built-in Numeric, Alphabetic, Date and Allow Empty validations available on [[Custom Fields]], [[User|users]] can also define their own validation or criteria for a [[Custom Fields|custom field]] by creating a validation based on JavaScript syntax.
  
>n or @value@>n
+
The JavaScript syntax can be entered into the ''JavaScript Validation'' field on the custom field settings page.
  
If @value@ is not found, the system will automatically put it at the very front of the validation criteria.
+
If '''SmartCheck''' is enabled, every reference to "frm.cf_''fieldid''.value" should be changed to;
 +
form.getStr("cf_fieldid")
 +
 
 +
==To accept only certain values==
 +
 
 +
>''n'' or @value@>''n''
 +
 
 +
If @value@ is not found, the system will automatically put it at the very front of the validation criteria.
  
 
'''Where'''
 
'''Where'''
  
n is any number
+
''n'' is any number
  
 
> means greater than
 
> means greater than
Line 30: Line 42:
  
 
>100 or @value@>100 in the Custom box.
 
>100 or @value@>100 in the Custom box.
 +
 +
==To limit a date to the future==
 +
 +
ConvertDateStr(@value@,"@dateformat@")>''date''
 +
 +
'''Where'''
 +
 +
''date'' is a date in the format "YYYY-MM-DD"
 +
 +
'''Example'''
 +
 +
To limit the date to a future date greater than today
 +
 +
ConvertDateStr(@value@,"@dateformat@")>"@YEAR(currentdate)@-@MONTH(currentdate)@-@DAY(currentdate)@"
  
 
==To limit the amount of characters that can be entered into a field==
 
==To limit the amount of characters that can be entered into a field==
 
+
@value@.length<''n''
@value@.length<n
 
  
 
'''Where'''
 
'''Where'''
  
n is any number
+
''n'' is any number
  
 
'''Example'''
 
'''Example'''
Line 44: Line 69:
  
 
@value@.length<35
 
@value@.length<35
 +
 +
==To validate the length of a number entered into a field==
 +
@value@.toString().length==n
 +
 +
'''Where'''
 +
 +
''n'' is any number
 +
 +
'''Example'''
 +
 +
To see if the length of a number is 10
 +
 +
@value@.toString().length==10
  
 
==To have a custom field only accept values in a range==
 
==To have a custom field only accept values in a range==
  
@value@>n && @value@<n
+
@value@>''n'' && @value@<''n''
  
 
'''Where'''
 
'''Where'''
  
n is any number
+
''n'' is any number
  
 
&& means "AND"
 
&& means "AND"
Line 69: Line 107:
 
==To perform pattern matching==
 
==To perform pattern matching==
  
isMatch(@value@, pattern, isEmptyOK)
+
isMatch(@value@,''pattern'',''isEmptyOK'')
  
Where pattern is
+
Where ''pattern'' is
  
 
L = Letter
 
L = Letter
Line 81: Line 119:
 
'''AND'''
 
'''AND'''
  
isEmptyOK is
+
''isEmptyOK'' is
  
 
True or False
 
True or False
Line 89: Line 127:
 
To validate 9 digits SIN number, put this into the box
 
To validate 9 digits SIN number, put this into the box
  
isMatch(@value@, 'NNNNNNNNN', false)
+
isMatch(@value@,'NNNNNNNNN',false)
  
 
==To allow only numbers and one other character==
 
==To allow only numbers and one other character==
  
isFloat(@value@.replace(/c/g,""),true)
+
isFloat(@value@.replace(/''c''/g,""),true)
  
 
'''where'''
 
'''where'''
  
c is any character
+
''c'' is any character
  
 
'''Example'''
 
'''Example'''
Line 107: Line 145:
 
==To allow letters and a space==
 
==To allow letters and a space==
  
isAlphabetic(@value@,Allow Empty,Allow Space)
+
isAlphabetic(@value@,''Allow Empty'',''Allow Space'')
  
 
'''where'''
 
'''where'''
  
Allow Empty - true/false
+
''Allow Empty'' - true/false
  
Allow Space - true/false
+
''Allow Space'' - true/false
  
 
'''Example'''
 
'''Example'''
Line 120: Line 158:
  
 
isAlphabetic(@value@,true,true)
 
isAlphabetic(@value@,true,true)
 +
 +
==To allow only integers==
 +
 +
parseInt(@value@)==@value@
 +
 +
==To restrict a special character or a string==
 +
 +
@value@.indexOf("enteryourstringhere")==-1
 +
 +
==To check if a phone number of a certain format==
 +
 +
isPhoneStr(@value@, "XXX-XXX-XXXX")
 +
 +
==To validate proper Email Address==
 +
 +
isEmail(@value@)
 +
 +
==To validate against a different custom field==
 +
 +
You can setup two fields (Amount Requested, Project Budget), and use the following to syntax to check the value entered on one of them against the other. Put this on the Amount Requested field to check if requested is more than the project budget
 +
 +
frm.cf_@Project Budget.id@.value>=@value@
 +
 +
If SmartCheck is enabled, use the following instead;
 +
form.getStr("cf_@Project Budget.id@") >= @ value@
 +
 +
 +
==To validate against a standard field==
 +
 +
You can perform validation against standard fields as well. For example, to validate that the a Canadian postal code syntax should only be enforced for Canadian contacts, use:
 +
 +
document.frmuser.ucountry.value!="10" || isMatch(@value@,'LNL NLN',true)
 +
 +
The syntax is:
 +
 +
document.''entity''.''standard field name''.value
 +
 +
where:
 +
* ''entity'' is ''frmuser'' for contact records and ''frmcompany'' for company records and
 +
* ''standard field name'' is the standard field name (see [[Variable List]] for field names)
 +
 +
==To make a field conditionally mandatory==
 +
 +
If you wish to make a field mandatory ''only if'' the value ''Yes'' is selected from a dropdown field, for example, use:
 +
 +
@value@!=="" || frm.cf_''fieldid''.value!="Yes"
 +
 +
in the JavaScript validation setting where:
 +
* ''fieldid'' is the [[Custom Field ID|custom field ID]] of the dropdown field
 +
 +
When using this method, ensure that "Allow Empty" is selected for this field.
 +
 +
==To make a [[Check Boxes]] field conditionally mandatory==
 +
 +
If there is a check box field under a [[showhideheader]] and you wish to make this check box field mandatory ''only if'' the value '''Yes''' is selected from a [[Combo Box]] field, use the JavaScript below in the [[JavaScript Validation]] on the [[Check Boxes]] custom field:<br />
 +
 +
'''isChkSelected(frm.cf_''fieldid'') || frm.cf_''fieldid''.value!="Yes"'''
 +
 +
 +
In the JavaScript validation syntax where<br />
 +
:1) '''isChkSelected(frm.cf_''fieldid'')''': this (frm.cf_''fieldid'') is the field id of the check box field to be made conditionally mandatory.<br />
 +
:2) '''frm.cf_''fieldid''.value''': this (frm.cf_''fieldid'') is the [[Custom Field ID|custom field ID]] of the [[Combo Box]] field that controls the visibility of the Check Boxes field.<br />
 +
 +
For example:
 +
* A combo box field:  Did your organization receive any financial assistance? (custom field id 545454)
 +
: * Options are Yes;No;
 +
 +
If yes is selected than they should answer a mandatory check box field. '''Which of the following types of financial assistance''' (custom field id 989898).
 +
 +
Include the following JavaScript Validation on the check box field:
 +
isChkSelected(frm.cf_989898) || frm.cf_545454.value!="Yes"
 +
 +
 
 +
When using this method, ensure that "Allow Empty" is selected for this field.
  
 
==See Also==
 
==See Also==
 
* [[Validation Message]]
 
* [[Validation Message]]
 +
* [[Server-Side Validation]]
 
* [[Submit Logic]]
 
* [[Submit Logic]]
 +
* [[savefunc]]
 +
* [[Email validation isEmail / isEmail2]]
 +
* [[Maximum Length]]
  
 +
{| class="wikitable"
 +
|-
 +
|[[Image:Why.jpeg|50px|link=]]
 +
|Click [http://wiki.smartsimple.com/wiki/Updated_Functionality_for_Maximum_Word/_Character_Limit_-_Why%3F here] to learn why this feature is a benefit to your organization.
 +
|}
  
[[Category:Custom Fields]][[Category:JavaScript Examples]]
+
[[Category:Custom Fields]][[Category:JavaScript]][[Category:Validation]][[Category:How]]

Latest revision as of 09:52, 9 July 2021

How.png This article will explain how you can implement this feature for use on your SmartSimple system.
This feature uses JavaScript syntax
Text code javascript.gif

In addition to the built-in Numeric, Alphabetic, Date and Allow Empty validations available on Custom Fields, users can also define their own validation or criteria for a custom field by creating a validation based on JavaScript syntax.

The JavaScript syntax can be entered into the JavaScript Validation field on the custom field settings page.

If SmartCheck is enabled, every reference to "frm.cf_fieldid.value" should be changed to;

form.getStr("cf_fieldid")

To accept only certain values

>n or @value@>n

If @value@ is not found, the system will automatically put it at the very front of the validation criteria.

Where

n is any number

> means greater than

< means less than

>= means greater than or equal to

<= means less than or equal to

== means equal to

!= means Not equal to

Example

To have a custom field only accept values larger than 100, enter

>100 or @value@>100 in the Custom box.

To limit a date to the future

ConvertDateStr(@value@,"@dateformat@")>date

Where

date is a date in the format "YYYY-MM-DD"

Example

To limit the date to a future date greater than today

ConvertDateStr(@value@,"@dateformat@")>"@YEAR(currentdate)@-@MONTH(currentdate)@-@DAY(currentdate)@"

To limit the amount of characters that can be entered into a field

@value@.length<n

Where

n is any number

Example

To limit the number of characters in a field to 35 or less

@value@.length<35

To validate the length of a number entered into a field

@value@.toString().length==n

Where

n is any number

Example

To see if the length of a number is 10

@value@.toString().length==10

To have a custom field only accept values in a range

@value@>n && @value@<n

Where

n is any number

&& means "AND"

|| means "OR"

! means "Not"

() means brackets :-)

Example

To have a custom field only accept values between 100 and 200, enter

" @value@>99 && @value@<201 "

To perform pattern matching

isMatch(@value@,pattern,isEmptyOK)

Where pattern is

L = Letter

N = Number

A = Alphanumeric

AND

isEmptyOK is

True or False

Example

To validate 9 digits SIN number, put this into the box

isMatch(@value@,'NNNNNNNNN',false)

To allow only numbers and one other character

isFloat(@value@.replace(/c/g,""),true)

where

c is any character

Example

To allow a field to contain only numbers and a semi-colon

isFloat(@value@.replace(/;/g,""),true)

To allow letters and a space

isAlphabetic(@value@,Allow Empty,Allow Space)

where

Allow Empty - true/false

Allow Space - true/false

Example

To allow a field to contain only letters and a space

isAlphabetic(@value@,true,true)

To allow only integers

parseInt(@value@)==@value@

To restrict a special character or a string

@value@.indexOf("enteryourstringhere")==-1

To check if a phone number of a certain format

isPhoneStr(@value@, "XXX-XXX-XXXX")

To validate proper Email Address

isEmail(@value@)

To validate against a different custom field

You can setup two fields (Amount Requested, Project Budget), and use the following to syntax to check the value entered on one of them against the other. Put this on the Amount Requested field to check if requested is more than the project budget

frm.cf_@Project Budget.id@.value>=@value@

If SmartCheck is enabled, use the following instead;

form.getStr("cf_@Project Budget.id@") >= @ value@


To validate against a standard field

You can perform validation against standard fields as well. For example, to validate that the a Canadian postal code syntax should only be enforced for Canadian contacts, use:

document.frmuser.ucountry.value!="10" || isMatch(@value@,'LNL NLN',true)

The syntax is:

document.entity.standard field name.value

where:

  • entity is frmuser for contact records and frmcompany for company records and
  • standard field name is the standard field name (see Variable List for field names)

To make a field conditionally mandatory

If you wish to make a field mandatory only if the value Yes is selected from a dropdown field, for example, use:

@value@!=="" || frm.cf_fieldid.value!="Yes"

in the JavaScript validation setting where:

When using this method, ensure that "Allow Empty" is selected for this field.

To make a Check Boxes field conditionally mandatory

If there is a check box field under a showhideheader and you wish to make this check box field mandatory only if the value Yes is selected from a Combo Box field, use the JavaScript below in the JavaScript Validation on the Check Boxes custom field:

isChkSelected(frm.cf_fieldid) || frm.cf_fieldid.value!="Yes"


In the JavaScript validation syntax where

1) isChkSelected(frm.cf_fieldid): this (frm.cf_fieldid) is the field id of the check box field to be made conditionally mandatory.
2) frm.cf_fieldid.value: this (frm.cf_fieldid) is the custom field ID of the Combo Box field that controls the visibility of the Check Boxes field.

For example:

  • A combo box field: Did your organization receive any financial assistance? (custom field id 545454)
* Options are Yes;No;

If yes is selected than they should answer a mandatory check box field. Which of the following types of financial assistance (custom field id 989898).

Include the following JavaScript Validation on the check box field:

isChkSelected(frm.cf_989898) || frm.cf_545454.value!="Yes"


When using this method, ensure that "Allow Empty" is selected for this field.

See Also

Why.jpeg Click here to learn why this feature is a benefit to your organization.