{"id":24502,"date":"2024-02-15T14:53:34","date_gmt":"2024-02-15T22:53:34","guid":{"rendered":"https:\/\/docs.extraview.com\/v25\/book\/example-field-validation-formatting-1\/"},"modified":"2025-02-18T08:34:17","modified_gmt":"2025-02-18T16:34:17","slug":"example-field-validation-formatting-1","status":"publish","type":"page","link":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/","title":{"rendered":"Example &#8211; Field Validation &#038; Formatting"},"content":{"rendered":"<p>This example shows how to format and validate a US telephone number field on an <em>Add<\/em> or <em>Edit<\/em> screen layout.<\/p>\n<p>The example involves a single field named <span class=\"fixedWidthFont\">tel_number<\/span>. Data in the form of numbers entered into this field will automatically be formatted in the usual form of a telephone number in the USA. For example, entering the digits <span class=\"fixedWidthFont\">1234567890<\/span> will result in a display of <span class=\"fixedWidthFont\">(123)456-7890<\/span>. In addition, the function will not allow any non-numeric characters to be entered unless the user acknowledges that this is what they want.<\/p>\n<p>To set up this requirement, take the following steps \u2013<\/p>\n<ul>\n<li>\n\t\tWithin the data dictionary, define the field <span class=\"fixedWidthFont\">TEL_NUMBER<\/span> with a display type of Text Field<\/li>\n<li>\n\t\tMake sure you give these fields read and write permission<\/li>\n<li>\n\t\tPlace this field on an <em>Add<\/em> screen layout. Add an HTML modifier to this field. The modifier value should be <span class=\"fixedWidthFont\">onkeypress=formatAsPhoneNumber(this);<\/span><\/li>\n<li>\n\t\tPlace the following JavaScript functions within the UserJavaScript.js file.<\/p>\n<pre class=\"code\">\r\nfunction chkNAN(char2chk)\r\n{\r\n   var validNum = \"0123456789\";\r\n   if (validNum.indexOf(char2chk) == \"-1\")\r\n      return(confirm(\"You have entered a non-numeric \r\n                      character.\\nDo you want to turn off non-\r\n                      numeric character checking?\"));\r\n}\r\n\r\nfunction formatAsPhoneNum(fld)\r\n{\r\n   var isNamedFone = false;\r\n   fldVal = fld.value;\r\n\r\n   var tmpStr = \"(\";\r\n   keyCount = fldVal.length;\r\n   keyEntered =fldVal.substring(keyCount-1,keyCount);\r\n\r\n   if (keyCount &lt; 2)   isNamedFone = false;\r\n   if (!isNamedFone)   isNamedFone = chkNAN(keyEntered);\r\n\r\n   keyCount++;\r\n   with (document.editForm)\r\n   {\r\n      switch (keyCount)\r\n      {\r\n         case 2:\r\n            tmpStr +=  fldVal;\r\n            fld.value = tmpStr;\r\n            break;\r\n         case 5:\r\n            fld.value +=  \")\";\r\n            break;\r\n          case 9:\r\n            fld.value += \"-\"; \r\n            break;\r\n      }\r\n   }\r\n}<\/pre>\n<\/li>\n<li>\n\t\tWhen the user enters the telephone number in the field it will be validated, and the formatting applied to the number. If they enter an invalid character, they will see a dialog box with the message <b>You have entered a non-numeric character. Do you want to turn off non-numeric character checking?<\/b><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This example shows how to format and validate a US telephone number field on an Add or Edit screen layout. The example involves a single field named tel_number. Data in the form of numbers entered into this field will automatically be formatted in the usual form of a telephone number in the USA. For example,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":24483,"menu_order":12,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_lmt_disableupdate":"no","_lmt_disable":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-24502","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Example - Field Validation &amp; Formatting - Product Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Example - Field Validation &amp; Formatting - Product Documentation\" \/>\n<meta property=\"og:description\" content=\"This example shows how to format and validate a US telephone number field on an Add or Edit screen layout. The example involves a single field named tel_number. Data in the form of numbers entered into this field will automatically be formatted in the usual form of a telephone number in the USA. For example,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Product Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-18T16:34:17+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/\",\"url\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/\",\"name\":\"Example - Field Validation & Formatting - Product Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\"},\"datePublished\":\"2024-02-15T22:53:34+00:00\",\"dateModified\":\"2025-02-18T16:34:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.extraview.com\/v25\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ExtraView 25\",\"item\":\"https:\/\/docs.extraview.com\/v25\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"User Custom Guide\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"JavaScript Interface\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Example &#8211; Field Validation &#038; Formatting\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"name\":\"ExtraView Product Documentation\",\"description\":\"ExtraView Documentation\",\"publisher\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\",\"name\":\"ExtraView Corporation\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"contentUrl\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"width\":512,\"height\":512,\"caption\":\"ExtraView Corporation\"},\"image\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Example - Field Validation & Formatting - Product Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/","og_locale":"en_US","og_type":"article","og_title":"Example - Field Validation & Formatting - Product Documentation","og_description":"This example shows how to format and validate a US telephone number field on an Add or Edit screen layout. The example involves a single field named tel_number. Data in the form of numbers entered into this field will automatically be formatted in the usual form of a telephone number in the USA. For example,...","og_url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/","og_site_name":"Product Documentation","article_modified_time":"2025-02-18T16:34:17+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/","url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/","name":"Example - Field Validation & Formatting - Product Documentation","isPartOf":{"@id":"https:\/\/docs.extraview.com\/v25\/#website"},"datePublished":"2024-02-15T22:53:34+00:00","dateModified":"2025-02-18T16:34:17+00:00","breadcrumb":{"@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/example-field-validation-formatting-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.extraview.com\/v25\/"},{"@type":"ListItem","position":2,"name":"ExtraView 25","item":"https:\/\/docs.extraview.com\/v25\/"},{"@type":"ListItem","position":3,"name":"User Custom Guide","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/"},{"@type":"ListItem","position":4,"name":"JavaScript Interface","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/javascript-interface-1\/"},{"@type":"ListItem","position":5,"name":"Example &#8211; Field Validation &#038; Formatting"}]},{"@type":"WebSite","@id":"https:\/\/docs.extraview.com\/v25\/#website","url":"https:\/\/docs.extraview.com\/v25\/","name":"ExtraView Product Documentation","description":"ExtraView Documentation","publisher":{"@id":"https:\/\/docs.extraview.com\/v25\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/docs.extraview.com\/v25\/#organization","name":"ExtraView Corporation","url":"https:\/\/docs.extraview.com\/v25\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/","url":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","contentUrl":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","width":512,"height":512,"caption":"ExtraView Corporation"},"image":{"@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/"}}]}},"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"carl.koppel","author_link":"https:\/\/docs.extraview.com\/v25\/author\/carl-koppel\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/24502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/comments?post=24502"}],"version-history":[{"count":0,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/24502\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/24483"}],"wp:attachment":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/media?parent=24502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}