OnClick Event to Highlight Required Entry Fields & Format Calculated Field

Hello @pvtsolver

If you want to validate the form by pressing a button, enter the following piece of code as the onclick event of the button:

jQuery(this.form).valid();

If you want change the texts’ colors of calculated fields’ components to green if the validation is true, the previous code can be edited as follows:

if(jQuery(this.form).valid()) jQuery('.cff-calculated-field *').css('color', 'green');

I’m sorry, but the support service does not cover the implementation of the users’ projects. If you need additional help to customize your form, you can contact me through my private website: Customization

Best regards.

Got it.

One more question please.

I want the value in the calculated field box to be removed entirely (box becomes empty) if one of the data inputs are invalid as soon as the user clicks my button.

Is this possible?

Please advise.

Hello @pvtsolver

In this case, you should use conditional operations in the equations. For example, assuming you have the equation: fieldname1/fieldname2, and you want to return a blank text if the value of the fieldname2 is less than or equal to 0

In this hypothetical example, you can edit the equation as follows:

IF(0<fieldname2, fieldname1/fieldname2, '')

And that’s all.
Best regards.

Got it. Thank you.

But any blank entry field is treated as zero.

How I can fix this?

Hello @pvtsolver

You can check in the condition the raw value of the field: fieldname2|r !== ''

Best regards.

Done. Thank you.

One more question please.

I want to add HTML code to the return value in the calculated field:

[number calculated] | P > P<sub>b</sub>

How to add a subscript text inside the calculated field?

Please advise.

• This reply was modified 4 years, 7 months ago by pvtsolver.

Hello @pvtsolver

The calculated fields use input tags, and the input tags do not render HTML code. The alternative would be to calculate the results with the equation associated with the calculated field but display them into an “HTML Content” field.

For example, assuming the equation to calculate the area is: fieldname1*fieldname2 and you want to get the result the format #### m²

Insert a “HTML Content” field in the form with a div tag as its content where will be displayed the result:

<div class="result-here"></div>

Edit the equation as follows:

(function(){
var result = fieldname1*fieldname2;
jQuery('.result-here').html(result+'m<sup>2</sup>');
return result;
})()

Finally, as the calculated field is used as auxiliary, you can hide it by ticking a checkbox in its settings.

Best regards.