number field turns red

Hello @rhodesengr

The issue is simple, you have defined the number format as digits, so, if you enter a decimal the validation rule fails and the plugin indicates the error. Please, select the field on your form, and then, select the “number” option for the “Number Format” attribute in its settings, instead the “digits” one.

Best regards.

Thanks for your reply. I did have the field set for Digits earlier yesterday. I changed it to Number and it was still turning Red. That is when I posted; after changing to Number. If is is on Digits, the response is different. A text message pops up saying to only enter Digits. So maybe the color part is stuck? It is allowing the Decimal number but still turning red.

Maybe I have to start with a fresh form?

Hello @rhodesengr

I’ve checked your form, and it was configured properly. However, the red color is not being applied to these fields by our plugin, these CSS rules are defined in the bootstrap file, that is not part of our plugin. Please, look the screenshot below:

Best regards.

when I first click in the field, the borders glows Blue. As soon as I enter a non-integer value, it turns red. I understand the colors may be coming from the bootstrap file but using your plugin, the border is changing. I am not a coder so can’t sort this stuff out myself. I would say there is some incompatibility somewhere between your plugin and my Theme. FYI, I tried your Simple Operations form on my page and it does the same thing.

Maybe you can update your plugin in how it calls the styles?
Or maybe you can suggest some custom CSS I can add to keep the border form turning red?

Hello @rhodesengr

The validator uses the invalid attribute in the fields, to identify which of them are valid or not, but bootstrap applies the red color to the tags with the invalid attribute.

The solution:

– Enter the style definition below, into the “Customize Form Design” attribute in the “Form Settings” tab:

input:focus:invalid,textarea:focus:invalid,select:focus:invalid{
    border-color: rgba(82,168,236,0.8) !important;
    color: #555 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6) !important;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6) !important;
}

Best regards.

OK Thanks, that worked. Much appreciated.

Just for the sake of discussion, you said
“but bootstrap applies the red color to the tags with the invalid attribute.”

Once I changed the field setting to Number, there should be no reason for the “invalid” attribute to be set when I simply enter a decimal number.

One possible feature request: I turned off the up/down arrows that appear with some browsers on the number fields. When I had those arrows on, they could only index the value in integer increments. I would have kept them on if there was a way to set the increment amount (like 0.1 or whatever)

Just trying to be helpful here: Maybe it is just a language thing but the terms “Digits” and “Number” for the number field setting are not really correct terms. In fact, they caused me some confusion in deciding which type to use. The correct terms are “Integer Number” and “Decimal Number”. Maybe you could consider changing them in your next update.

Also, I did read through some of your documentation. For some settings I could not find anything. For example in the Number field settings, I could not find anything that described “format dynamically” or the differences for Field Size choices. Maybe those features are described somewhere and I just missed it.

Thanks again. I do really appreciate your support.

Hello @rhodesengr

The jQuery validator module, used by our plugin, assigns to the tags the attribute invalid="false" or invalid="true", when the validation rules are evaluated, but bootstrap applies the color code to every tag with the invalid attribute, no matter its value.

Concerning the spinner controls in the numbers fields. They are not included by our plugin, these controls are displayed by the browser directly into the input tags with type="number". However, you can force the browsers to hide them, entering the following style definition into the “Customize Form Design” attribute:

input[type='number'] {-moz-appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

About the options in the “format” attribute, we have decided to use the “digits” term, because, you can use these controls even for entering some kind of code, like: 00004, that is not exactly an usual integer number.

Best regards.