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
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).
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 ?
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.
Perfect Bart
This worked as I wanted
Excellent thanks for your help
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() } );
});
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() : "" } );
});
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”], 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.
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'], 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?
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);
});
}
}
})
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. You need to link them into Knack as per instructions here. Cheers.
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 ......
You need to add a Javascript to complete the action as per your requirements. See here for an example of Custom Form Validation.
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)
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