Level 4

Solved

Telephone field being used for numeric

Forum|Forum|7 years ago
February 16, 2018
16 replies
8489 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:

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.
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:

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

Hope this helps !!!

Cheers,

Jagjeet Singh
AEM Forms Blog

deepakt84913413Author

Level 4

Those were the steps to recreate by the way.

James_R_Green

Level 6

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

Level 3

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

deepakt84913413Author

Level 4

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?

deepakt84913413Author

Level 4

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

Level 6

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

Level 3

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

deepakt84913413Author

Level 4

James,

It worked like charm! Thanks so much!

jagjeetthukralAccepted solution

Level 3

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:

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.
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:

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

Level 6

@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.

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded