Telephone field being used for numeric

[deepakt84913413]

I am using OOTB telephone field instead of the numeric field because it's input type is "tel" which forces mobile devices to pop number keypad.

How ever when I am trying to compare values of 2 telephone fields. some numbers seem to clash.

Create an adaptive form without a form model.

Add 2 telephone fields in the form.

Open rule editor of the second telephone field and add a rule in the code editor as - "this.value > telephone1.value"

add a submit button to the form.

Make both the fields required.

Remove the validation patterns for the fields.

Preview the form.

Put 2000 in the first field and 19000 in the second field which satisfies the requirement. But it still throws a validation error when you focus out of the field or when you try to submit.

  I am not able to use the numeric field because it does not trigger validation error right after I focus out of the field. The text fiels and the telephone fields do.

Thanks for the help.

[deepakt84913413]

Those were the steps to recreate by the way.

[James_R_Green]

deepakt84913413​

The values are actually of type string, so you need to parse them into integers to compare them. Example here:

console.log("type = " + typeof this.value);

console.log("value = " + parseInt(this.value, 10) );

console.log("tel1 = " + parseInt(telephone1.value,10));

if(parseInt(this.value, 10) > parseInt(telephone1.value,10)){

  console.log('returning true');

  true;

}

else{

  console.log('returning false');

  false;

}

[jagjeetthukral]

deepakt84913413​ :

Why don't you use HTML5 number field in your forms. I have created a blog post here with a step by step way to achieve what you want.

Numeric Box Widget Tips in Adaptive Forms for Mobile Devices | AEM Forms Blog

It works in mobile also, with all the rules. Please go through the blog post and it will solve your problem.

Hope it helps & answers your question .

Cheers,

Jagjeet Singh

AEM Forms Blog

[deepakt84913413]

Hi Jagjeet,

Yes. I could use that. But I also was not able to use it because of the validation error not being triggered when I exit out of the numeric field. When I make other fields like text field, Phone number field etc, required, the "Required field" validation triggers right after the I exit out of the field, which does not happen with numeric field for some reason. Is there a way I could trigger that?

[deepakt84913413]

Hey James,

Thanks for the code. It definitely helped me to start comparing the results succesfully.

Could you help me out with any example code for triggering required field validation right after I exit out of the field for a numeric field component? It works for Text field and Phone number field. But not numeric field.

Thanks for the help in advance.

[James_R_Green]

deepakt84913413​

Try adding the following rule in the code editor on your field 'on value commit':

guideBridge.validate(null,this.somExpression);

That should trigger the validation for that field when you change something and leave the field.

[jagjeetthukral]

Hi deepakt84913413​

The code I have shared has a comparing code already working on mobile sites, also you can use the below piece of code on initialize of root panel or the field to achieve what you want (validation to trigger when you leave the field.

$(".numericbox1518941620523 input").focusout(function() {guideBridge.resolveNode("numericbox1518941620523").validate()});

//replace numericbox1518941620523  by the name of your text field

This piece of code has some hardcoding, but I will soon be able to provide you a piece of code which does not have any hardcoding (as soon as I find a bit of time)

Hope this helps and you will be able to get yourself going with this piece of code.

Cheers,

Jagjeet Singh

AEM Forms Blog

[deepakt84913413]

James,

It worked like charm! Thanks so much!

[jagjeetthukral · Accepted solution]

James R Green​, deepakt84913413​,

I think I am missing something, I have tried this solution but it does not validate on focus out when I have NOT typed anything in the box, which was the initial requirement from deepakt84913413​. Please let me now, if there is some step which I missed.

Below are some of my suggestions :

• If what I found previously is correct:

1. Since this solution validates only after some input entry is made (at least for me), this makes the functionality same as marking the field mandatory. I would recommend it to remove it and just make the field mandatory. This prevents lesser script load on browser making form better.
2. Please use the below code on Root Panel. This code will help you make sure you have uniform experience all across the form, as you don't need to remember to enter the code in all the fields, now and during maintenance phase.
   
   

var classesToValidate = ["guideNumericBox"]; //add "," separated widget classes you want to validate on focus/tap out

this.visit(function(cmp) {

    if(classesToValidate.indexOf(cmp.className) !== -1) {

        $("." + cmp.name + " input").focusout(function() {

          guideBridge.resolveNode(cmp.name).validate();

        });

    }

});

• If what I found was wrong:

1. I would suggest to change the Code which James R Green​ provided to this.validate();
   

Hope this helps !!!

Cheers,

Jagjeet Singh
AEM Forms Blog

[James_R_Green]

@jagjeetthukral

If you A haven't typed anything or B haven't changed anything - do you need to validate?

In scenario A, the field is as valid as when you loaded the form.

In scenario B, the field is as valid as when you last entered data.

[jagjeetthukral]

Hi James R Green ,

Sorry for being noob.

The field validation is automatically triggered when you make changes in the field values (any widget : text or numeric). (I might be missing something, just writing for my knowledge, please let me know what am I missing). Thus, in my perception, the script you provided does not do anything over & above this.

The only difference between text & numeric validation is the trigger when you haven't changed anything, and I suppose that it what deepakt84913413​ had been reffering to in his comments.

Cheers,

Jagjeet Singh

AEM Forms Blog

[James_R_Green]

@jagjeetthukral

I wasn't trying to accusing you of being a noob

"I am not able to use the numeric field because it does not trigger validation error right after I focus out of the field. The text fiels and the telephone fields do."

I tested the numeric field on AEM 6.3 and it didn't trigger the validation after leaving the field, unlike a text box which did automatically trigger the validation. The code I offered was to workaround for that issue. It seems inconsistent behaviour so could be a bug. Maybe it does work on the version of AEM that you are using?

[deepakt84913413]

jagjeetthukral​ & James R Green

Honestly both the codes are working pretty good. What I need is being achieved by both of them.

But the code Jagjeet has posted, is a one time code and for the code snippet James has posted, I would need to hard code the element name every time I am making it a required field.

I will definitely document both of these so that, depending on what kind of implementation each teams might pursue, they can use the respective way. For me, Jagjeet's would make it much easier because I don't need to update the code every time I add a numeric field.

I will test some more and update the post. Thank you so much guys.

[jagjeetthukral]

Hi James R Green​ ,

I have tested the same on 6.3, 6.3 SP1, & 6.4 Beta Load 20 and validations are automatically triggered for numeric box on any value commit. I do NOT see any bug there, can you please check once more.

deepakt84913413​ :

What was the initial issue you were facing,

1. Was it Validations not working for numeric field on tap-out without any value change, something like in this video AEM Forms Field Validation Aberrant behavior - YouTube.

The fix for this is the script which I gave you. Detailed explanation here: Validate Fields on tap out or focus out | AEM Forms Blog

2. Or, Was it validation not working for numeric fields on value changes . If this was the case, then I guess you will have to debug your implementation, as some of your code might be hindering this, as it works out of the box. Writing any extra will only slow down your form.

Cheers,
Jagjeet Singh

AEM Forms Blog

[deepakt84913413]

Hi Jagjeet,

The use case shown in the video is exactly what is going on.

And your code is working pretty good.

But I still cannot use the numeric box because it is not able to handle more than 16 digits in the field.

1. Place a numeric box.

2. preview the form.

3. Enter 20-25 digits in the field.

4. The numeric box will either change some of the last digits to '0' or format the number into decimals.

[jagjeetthukral]

Thanks,

The issue which you have mentioned is due to number higher that javascript's limit for numbers being converted to exponentional  or scientific notations ex 123.11e26.

This issue is at Javascript's end and not at AEM Forms end. You can go to browser's console, create a "var a = 1111111111111111111111111111111111111111111" and then just get alert(a), you will get out put in exponential notation.

As a solution, I will suggest you to use text field with pattern validation for number, but bear in mind that you won't still be able to compare such numbers in AEM Forms directly, which was you initial requirement. In this case you will have to write a custom function to compare numbers digit by digit. Also, numpad will not open up directlly on these fields.

If you want to know more on how to create and use custom functions visit this blog post Custom function(s) for AEM Forms (Adaptive Form) | AEM Forms Blog

If you want the numeric field to open up directly on mobile devices, you will have to create Custom Widget. For accessing a step by step guide to create a custom widget  refer Custom Widget(s) in AEM Forms (Adaptive Forms) | AEM Forms Blog

Also, I would request you to create a new thread for a new issue, as this helps other forum users get to the right answers easily in future.

Hope this helps !!!

Cheers,

Jagjeet Singh
AEM Forms Blog