Telephone field being used for numeric | Community
Skip to main content
deepakt84913413
deepakt84913413
Level 4
February 16, 2018
Solved

Telephone field being used for numeric

  • February 16, 2018
  • 16 replies
  • 8488 views

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by jagjeetthukral

    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

    16 replies

    Show previous replies
    jagjeetthukral
    jagjeetthukral
    Level 3
    February 20, 2018

    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
    James_R_Green
    Level 6
    February 20, 2018

    @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
    deepakt84913413Author
    Level 4
    February 20, 2018

    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
    jagjeetthukral
    Level 3
    February 21, 2018

    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
    deepakt84913413Author
    Level 4
    February 21, 2018

    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
    jagjeetthukral
    Level 3
    February 21, 2018

    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

    Terms & ConditionsAccessibility statement

    Loading footer...