# JScript to restrict Text field to 6 characters

**URL:** <https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866>\
**Category:** API & Custom Code\
**Created:** [July 21, 2015, 7:42am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866 "2015-07-21T07:42:17Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![ChrisWebb27814](https://avatars.discourse-cdn.com/v4/letter/c/b9bd4f/32.png) [@ChrisWebb27814](https://forums.knack.com/u/ChrisWebb27814)\
**Post date:** [July 21, 2015, 7:42am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/1 "2015-07-21T07:42:17Z")

</div>

Has anyone used JScript through API to restrict the number of characters in a short text field or any other field

Or alternatively to validate the number of characters entered when submitting a form

Any pointers would be great

---

<div class="post-metadata">

**Author:** ![BartvanBeu70192](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BartvanBeu70192](https://forums.knack.com/u/BartvanBeu70192)\
**Post date:** [August 4, 2015, 11:16am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/2 "2015-08-04T11:16:18Z")

</div>

Hi Carl, I’m not sure I understand the scenario. As long as you know the field name you can use that to add JS controls such as in the snippets above. The field names can be found in the objects (database section of the Builder).

---

<div class="post-metadata">

**Author:** ![ChrisWebb27814](https://avatars.discourse-cdn.com/v4/letter/c/b9bd4f/32.png) [@ChrisWebb27814](https://forums.knack.com/u/ChrisWebb27814)\
**Post date:** [August 1, 2015, 4:33pm UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/3 "2015-08-01T16:33:25Z")

</div>

Hi Bart

To enable reporting I have to change the field to Multiple choice and give the user ability to add in a new part

This then by-passes the jscript code and allows multiple field entry

Can this field be locked down also to 6 characters ?

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/5030490182/original/blob1438446797368.png?1438446796)

---

<div class="post-metadata">

**Author:** ![BartvanBeu70192](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BartvanBeu70192](https://forums.knack.com/u/BartvanBeu70192)\
**Post date:** [July 30, 2015, 10:59pm UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/4 "2015-07-30T22:59:16Z")

</div>

One way to restrict, on input, which character are being entered would be something like this (not optimized) snippet:

```
$(document).on("knack-view-render.view_8", function (event, view, data) {
  $("input#field_2").keyup(function() { 
    var str=this.value.replace(/[^a-z0-9]/gi,"");
    var d1=(str.length<=10)?str.toUpperCase():str.slice(0,10).toUpperCase();    
    $("#field_2").attr("value",d1); 
  });
});
```

It removes all non a-z and 0-9 characters on input, and also restricts how many characters can be entered.

---

<div class="post-metadata">

**Author:** ![ChrisWebb27814](https://avatars.discourse-cdn.com/v4/letter/c/b9bd4f/32.png) [@ChrisWebb27814](https://forums.knack.com/u/ChrisWebb27814)\
**Post date:** [July 27, 2015, 8:23am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/5 "2015-07-27T08:23:05Z")

</div>

Perfect Bart

This worked as I wanted

Excellent thanks for your help

---

<div class="post-metadata">

**Author:** ![BartvanBeu70192](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BartvanBeu70192](https://forums.knack.com/u/BartvanBeu70192)\
**Post date:** [July 26, 2015, 10:39am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/6 "2015-07-26T10:39:34Z")

</div>

Sorry, that doesn't quite work as you want, this should:

```
$(document).on("knack-view-render.view_8", function (event, view, data) {
  $("input#field_2").keyup(function() { this.value = (this.value.length<=17) ? this.value.toUpperCase() : this.value.slice(0,17).toUpperCase() } );

});
```

---

<div class="post-metadata">

**Author:** ![BartvanBeu70192](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BartvanBeu70192](https://forums.knack.com/u/BartvanBeu70192)\
**Post date:** [July 26, 2015, 9:03am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/7 "2015-07-26T09:03:23Z")

</div>

Carl,

in addition to your function above,

to limit the number of characters being inputted, you could try something like this.

```
$(document).on("knack-view-render.view_8", function (event, view, data) {
  $("input#field_2").keyup(function() { this.value = (this.value.length<=17) ? this.value.slice(0,16).toUpperCase() : "" } );
});
```

---

<div class="post-metadata">

**Author:** ![BartvanBeu70192](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BartvanBeu70192](https://forums.knack.com/u/BartvanBeu70192)\
**Post date:** [July 25, 2015, 10:14am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/8 "2015-07-25T10:14:05Z")

</div>

Hi Carl,

yes you need to link the JS libraries (and any CSS definitions) into Knack using the LazyLoad function. You could try loading the Zebra libraries from a CDN (Content Delivery Network) such as rawgit. Search the Internet for a suitable CDN that contains the Zebra libraries.

I use the sweetAlert library and load it from the github CDN as per below example:

```
LazyLoad.js(["https://cdn.rawgit.com/t4t5/sweetalert/master/dist/sweetalert.min.js"], function() { 
 c_msg("sweetAlert library has loaded"); });

LazyLoad.css([“[https://cdn.rawgit.com/t4t5/sweetalert/master/dist/sweetalert.css](https://cdn.rawgit.com/t4t5/sweetalert/master/dist/sweetalert.css)”], function () {  
c\_msg(“sweetAlert CSS files have loaded”); });
```

Alternatively, if you’re developing an intranet solution, download & install the libraries onto your local server and LazyLoad them from there. Or onto your desktop if its a stand-alone app.

---

<div class="post-metadata">

**Author:** ![ChrisWebb27814](https://avatars.discourse-cdn.com/v4/letter/c/b9bd4f/32.png) [@ChrisWebb27814](https://forums.knack.com/u/ChrisWebb27814)\
**Post date:** [July 25, 2015, 10:03am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/9 "2015-07-25T10:03:39Z")

</div>

Hi Bart

Thanks for the links and the links

I am presuming to add in the alert boxes I would have to upload via the below

// the first parameter is an array of files to load. The second is a function to execute after all the libraries have completed loading.

LazyLoad.js(['[https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js](https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js)'], function () {

alert('All my files have completed loading!');

});

But this is dependent on the code being available online as in your example

How would I load the below or similiar where there is only a download option?

[http://stefangabos.ro/jquery/zebra-dialog/](http://stefangabos.ro/jquery/zebra-dialog/)

---

<div class="post-metadata">

**Author:** ![ChrisWebb27814](https://avatars.discourse-cdn.com/v4/letter/c/b9bd4f/32.png) [@ChrisWebb27814](https://forums.knack.com/u/ChrisWebb27814)\
**Post date:** [July 25, 2015, 8:20am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/10 "2015-07-25T08:20:55Z")

</div>

Bart

Ideally I would like to validate the field when it is being entered

So something on the lines of

```
$(document).on("knack-view-render.view_85", function(event, view, data) {
```

```

```

```
$("#view_85 .kn-keyup input[type=keyup]").on('keyup', function() {
```

```
limitText(this, 2)
```

```
});
```

```

```

```
function limitText(field, maxChar){
```

```
var ref = $("#view_85 #field_344"),
```

```
val = ref.val();
```

```
if ( val.length >= maxChar ){
```

```
ref.val(function() {
```

```
console.log(val.substr(0, maxChar))
```

```
return val.substr(0, maxChar);
```

```
});
```

```
}
```

```
}
```

```
})
```

---

<div class="post-metadata">

**Author:** ![BartvanBeu70192](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BartvanBeu70192](https://forums.knack.com/u/BartvanBeu70192)\
**Post date:** [July 25, 2015, 8:14am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/11 "2015-07-25T08:14:30Z")

</div>

Great that it's working. If you want to use an custom dialog box instead of the standard alert, have a look at the Javascript libraries [here](https://www.freshdesignweb.com/jquery-javascript-popup-window/). You need to link them into Knack as per instructions [here](http://helpdesk.knackhq.com/support/solutions/articles/5000447139-customization-with-jquery-and-javascript). Cheers.

---

<div class="post-metadata">

**Author:** ![ChrisWebb27814](https://avatars.discourse-cdn.com/v4/letter/c/b9bd4f/32.png) [@ChrisWebb27814](https://forums.knack.com/u/ChrisWebb27814)\
**Post date:** [July 25, 2015, 8:03am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/12 "2015-07-25T08:03:40Z")

</div>

Thanks Bart of course missed that bit

I have this working is there any method to amend the Warning Message

Remove or Improve " The page ......

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/5029437871/original/blob1437811356707.png?1437811356)

---

<div class="post-metadata">

**Author:** ![BartvanBeu70192](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BartvanBeu70192](https://forums.knack.com/u/BartvanBeu70192)\
**Post date:** [July 25, 2015, 7:40am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/13 "2015-07-25T07:40:00Z")

</div>

You need to add a Javascript to complete the action as per your requirements. See [here](http://helpdesk.knackhq.com/support/solutions/articles/5000447560-code-examples) for an example of Custom Form Validation.

---

<div class="post-metadata">

**Author:** ![ChrisWebb27814](https://avatars.discourse-cdn.com/v4/letter/c/b9bd4f/32.png) [@ChrisWebb27814](https://forums.knack.com/u/ChrisWebb27814)\
**Post date:** [July 25, 2015, 7:34am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/14 "2015-07-25T07:34:36Z")

</div>

HI Bart

I tried your code as below but then the application does not load when attempting to log-in

I get a blue bar at the top

// Field Size Validation field\_174,

$(document).on("knack-view-render.view\_85", function(event, view, data) {

$("#view\_85 .kn-submit input[type=submit]").on("click", function() {

var v = $("#view\_85 #field\_174").val();

if (v.length!=6)

---

<div class="post-metadata">

**Author:** ![BartvanBeu70192](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BartvanBeu70192](https://forums.knack.com/u/BartvanBeu70192)\
**Post date:** [July 23, 2015, 6:48am UTC](https://forums.knack.com/t/jscript-to-restrict-text-field-to-6-characters/7866/15 "2015-07-23T06:48:09Z")

</div>

You could try something along like:

```
$(document).on("knack-view-render.view_8", function(event, view, data) {
$("#view_8 .kn-submit input[type=submit]").on("click", function() {
var v = $("#view_8 #field_2").val();

if (v.length!=17) { your action here
```