how to set default value and min/max value for a textfield

[aaronfreed]

i have a table with an integer field  called 'quantity'. 

in the form submission datapage for that table, i have a 'text field' form element to allow the user to specify the quantity. i need to do three things:

1. set a default of 1

2. set a minimum value of 1

3. set a maximum value. the maximum value may be fixed (e.g. '5') or it may have to be a calculated value (e.g. SELECT SUM(someField) FROM tbl.some_other_table WHERE....)

can you help? gracias!

 

[TellMeWhy]

9 hours ago, aaronfreed said:

i have a table with an integer field  called 'quantity'. 

in the form submission datapage for that table, i have a 'text field' form element to allow the user to specify the quantity. i need to do three things:

1. set a default of 1

2. set a minimum value of 1

3. set a maximum value. the maximum value may be fixed (e.g. '5') or it may have to be a calculated value (e.g. SELECT SUM(someField) FROM tbl.some_other_table WHERE....)

can you help? gracias!

 

It needs JavaScript to force users to not be able to submit if it doesn't meet the criteria.

You can use Virtual Field > Calculated Value to check if those criteria are met.

Use the method here:

 

[aaronfreed]

thanks, @TellMeWhy. i'll give it a shot. regrettably, i failed to mention that i need this to work for inline adds and inline edits in a tabular report, which complicates matters. do you or anyone else have thoughts only validating inputs on what would be multiple fields of the same class in different rows of the table? it's particularly a challenge since other fields in each row share the same class.

[TellMeWhy]

20 hours ago, aaronfreed said:

thanks, @TellMeWhy. i'll give it a shot. regrettably, i failed to mention that i need this to work for inline adds and inline edits in a tabular report, which complicates matters. do you or anyone else have thoughts only validating inputs on what would be multiple fields of the same class in different rows of the table? it's particularly a challenge since other fields in each row share the same class.

Ah, Inline, I don't really like going there, but, I guess this is pretty simple. 

Here's the Inline Insert Example

 for ALERT and then change the value to 1

<script>

document.addEventListener("DataPageReady", function fx(){ // Upon Load set value of FIELDNAME to 1


document.getElementById('InlineAddFIELDNAME').value ='1'; //change FIELDNAME to actual Field Name

document.addEventListener("input", function tx(){//check of any inputs being done
  
var field1=document.getElementById('InlineAddFIELDNAME'); //change FIELDNAME to actual Field Name

if(field1.value < 1 || field1.value > 5){

alert("Field cannot be less than 1 or greater than 5");

field1.value ='1';

}

if(isNaN(field1.value)== true){ //checks if the value is not a number
alert("Field should be a number");

field1.value ='1';
}

});



});
  
</script>

 

Here's the Inline Edit version

<script type="text/javascript">

document.addEventListener("click", function(event){
if(event.srcElement.getAttribute("data-cb-name") == 'InlineEdit'){ //checks if the clicked element is the Inline Edit Button

document.addEventListener('input', function(e){


var field1 = document.querySelector('input[name="InlineEditFIELDNAME"]');


if(field1.value < 1 || field1.value > 5){

alert("Field cannot be less than 1 or greater than 5");

field1.value ='1';

}
  
if(isNaN(field1.value)== true){ //checks if the value is not a number
alert("Field should be a number");

field1.value ='1';
}


});

}
});

</script> 

 

[aaronfreed]

@TellMeWhy oooff. i don't want to go there, either. but wow...thanks for making that effort. i'll give it a try. perhaps after a nap. or a shot of rum. i'll report back for posterity's sake. again, thanks!

[aaronfreed]

whelp @TellMeWhy,  i'm stumped.

first, what works:

<script>
document.addEventListener("DataPageReady", function fx(){ // Upon Load set value of FIELDNAME to 1
document.getElementById('InlineAddFIELDNAME').value ='1';
</script>

since caspio only gives us a text field to input numbers, i used the same method to change the input type:

<script>
  document.addEventListener("DataPageReady", function fx(){ // Upon Load set value of FIELDNAME to 1
  var el = document.getElementById('InlineAddFIELDNAME');
  el.setAttribute("type","number");
  el.value = 1;
</script>

and that works like a champ.

before trying your eventListener approach to validating the input, i tried setting "min" and "max" attributes using the metheod above, but that didn't work; i didn't get any HTML5 messages saying the input was out of limits.  and i couldn't get it to work either (i opted for the 'alert' version):

<script>
  document.addEventListener("input", function tx(){
  var field1=Number(document.getElementById('InlineAddFIELDDNAME').value);
  if(field1 < 1 || field1 > 5){
	alert("Field cannot be less than 1 or greater than 5");
    field1.value = '1';
</script>

acknowledging that the code changes slightly if i've redefined the input type as a number, i still couldn't get this to work. the 'input' event doesn't let me change anything; i am simply stuck with the default '1' and any attempt to change it results in an alert and reset to '1'.

so, my question now is: what other events might i use (and might you direct me to a resource showing me the types of events available on a caspio form, inline or otherwise)? or maybe this is a validation that can only occur upon clicking the 'add' button?

[TellMeWhy]

@aaronfreed You're missing closing parentheses and brackets. Can you try the code again? Instead of converting the field to a Number, we'll just check if it's NaN (not a Number) then, it alerts and sets the value to 1. Note that the DEFAULTING to 1 is OUTSIDE the input event listener, what's inside are just the conditions for validation

[aaronfreed]

hi @TellMeWhy. no joy. using a direct paste of your code (having duly replaced FIELDNAME), the validation doesn't work; every time i try to input something, i get the alert message. it is as if the 'input' event is a little trigger happy and doesn't give me the chance to input anything. i have confirmed that there are no uncaught javascript errors on the page using the console, so at least we know the code is syntactically good. and ideas?

here is the code again:

<script>
//set input default to one
document.addEventListener("DataPageReady", function fx(){
var el = document.getElementById('InlineAddquantity');
el.setAttribute("type","number");
el.value = '1';
//el.setAttribute("min","1");
//el.setAttribute("max","5");

//check for value in range...alert and reset if not
document.addEventListener("input", function tx(){
var field1=document.getElementById('InlineAddquantity');
if(field1.value < 1 || field1.value > 5){
  alert("Field cannot be less than 1 or greater than 5");
  field1.value = '1';
  };
if(isNaN(field1.value)== true){
  alert("Field should be a number");
  field1.value ='1';
}
});
})
</script>

 

[TellMeWhy]

12 minutes ago, aaronfreed said:

hi @TellMeWhy. no joy. using a direct paste of your code (having duly replaced FIELDNAME), the validation doesn't work; every time i try to input something, i get the alert message. it is as if the 'input' event is a little trigger happy and doesn't give me the chance to input anything. i have confirmed that there are no uncaught javascript errors on the page using the console, so at least we know the code is syntactically good. and ideas?

here is the code again:

<script>
//set input default to one
document.addEventListener("DataPageReady", function fx(){
var el = document.getElementById('InlineAddquantity');
el.setAttribute("type","number");
el.value = '1';
//el.setAttribute("min","1");
//el.setAttribute("max","5");

//check for value in range...alert and reset if not
document.addEventListener("input", function tx(){
var field1=document.getElementById('InlineAddquantity');
if(field1.value < 1 || field1.value > 5){
  alert("Field cannot be less than 1 or greater than 5");
  field1.value = '1';
  };
if(isNaN(field1.value)== true){
  alert("Field should be a number");
  field1.value ='1';
}
});
})
</script>

 

Your code  works as expected on mine, what are you trying to input? you said mininum of 1, and max of 5, you can only input 1,2,3,4,5 there nothing else. Is the min and maximum length instead of value?Other Media

[aaronfreed]

it appears that the javascript console being open was the issue:

first attached screenshot: input field with console closed 

second attached screenshot: input with console open

and i was testing with the console opened, which inexplicably (at least to me) caused things to break.

so, good to go! thank you @TellMeWhy