validate decimal

Report · Sep 04, 2015

Hi. I have a form for a user to type in a number into a text box. I want to allow them to enter whole numbers and numbers with 1 decimal place. If they enter a number with more than 1 decimal place, I want the form to stop from submitting, or pop up a window that says they have to enter a number with only 1 decimal place. Can this be done with Cold Fusion's validation code in the form, or does it have to be written in Javascript in order for this to work? I do have some javascript code below that I used on another page that allows 2 decimal places, but I cannot get this javascript to work. It pops up a window that says I need to enter 2 decimal places, but the form still gets submitted. How do I stop the form from being submitted until it is entered correctly? I don't understand Javascript very well. This is why I was wondering if there was an easier way with Cold Fusion's validation code instead? Here's the code that works, but doesn't stop the form from submitting:

function newItem()

{

//This code below is so that the hours fields are entered correctly with whole numbers and decimal points such as 1, 1.0, 1.02, etc.

if(!validateHours()){

//do nothing

}

else

{

document.AddECNumber.action ="add_newitem_existing_eco.cfm";

document.AddECNumber.submit();

}

var validateHours = function () {

var fields = document.getElementsByClassName("field");

var success = true;

for(var t = 0; t< fields.length; t++){

success = validateInput(fields.value, fields.getAttribute("label"));

if(!success){

break;

}

return success;

}

var validateInput = function (val, name) {

var regex = /^[0-9]\d*(((,\d{3}){1})?(\.\d{0,2})?)$/;

var success = true;

if(val === "") {

return success;

}

if(val.indexOf(".") > 0 && val.length - (val.indexOf(".") + 1) > 2){

alert(name + " cannot have more than 2 decimal places.");

success = false;

}

if (success && !regex.test(val.replace("$", ""))){

alert("Please enter a valid value for " + name);

success = false;

}

return success;

}

// End -->

</script>

</cfif>

<tr>

<td>

</cfif>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

</form>

</td>

</tr>

</table>

<p>

<tr>

</tr>

</table>

</cfif>

</cfoutput>

</div>

Thanks.

Andy

Report · Sep 04, 2015

Here's a very easy way to format the number as desired, either on the fly with keyup and change, or use blur if you want to wait until the user is done typing inside that element.

First, our input field. I'm going to name it "hours".

<input type="text" id="hours" name="hours" value="" onkeyup="return formatHours(this.value);" />

Now, I'm going to create a function using a ternary conditional. This will return the value in the correct format.

function formatHours(hoursValue){
   if(isNaN(hoursValue)){ return 0; }
   return (Number(hoursValue) % 1 === 0) ? Number(hoursValue) : Number(hoursValue).toFixed(1) ;
// if the remainder of hoursValue divided by 1 is 0 (evenly divisible by 1), return hoursValue;
// otherwise, force the number to display with one decimal point only for the remainder.
   }

Quick, easy, painless.

HTH,

^_^

Report · Sep 04, 2015

WolfShade,

I tried this, but it's not displaying a pop up window if I type in a number with more than 1 decimal. It just goes through and submits the form. I want a pop up window or alert window that stops the form from submitting if there is a number that is entered with more than 1 decimal. How do I do that? Thanks.

Andy

Report · Sep 04, 2015

The code I provided will format the value, eliminating the time spent notifying the user that the format is not correct, making sure that the format is correct when the form submits.

<input type="submit" onchange="this.form.submit()" onclick="newItem()" value="Update">

You are using onchange to submit the form, regardless of what happens from the onclick. Remove the onchange, and put the form.submit() in the newItem() function, after everything has passed validation.

V/r,

^_^

Adobe Community

validate decimal