Solved

validation and formatting using custom directive with angularjs

Posted on 2014-10-15
4
178 Views
Last Modified: 2014-11-08
I am writing custom directive to validate and format the input using angularjs and I stuck in the middle while formatting the input.The valid input must have 3 digits with 2 decimals.Below I have mentioned 3 regex patterns with output format and if user enters any one of the below matching regex pattern and it should format accordingly.
In the directive I am using blur function because I want format/show error message when user leaves the textbox.Please help me to fix this issue.Here is the fiddle.fiddle


            input with reg pattern             output(need to format)

      Ex:      // [/^\d{3}$/] 789  --->               789.00
              // [/^(\d{3})\.(\d{1})$/] 789.4  --->  789.40
                // [/^(\d{3})(\d{2})$/] 78945-->       789.45
0
Comment
Question by:ksd123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40381874
why a regex?

if(inputvalue) {
   return ((inputvalue.substr(0,3) + "." + inputvalue.substr(3) ) * 1).toFixed(2);
}
return undefined;

Open in new window

0
 

Author Comment

by:ksd123
ID: 40382750
Thank you.I have updated the directive with the above code.It is not working as expected,sometimes I am getting NaN ,if I enter 10 digits it's formatting and giving first 5 digits with 2 decimals which is not valid as it show error message.In  one scenario it is working as expected ie. if user enters 123, it gives 123.00.
Here is the updated fiddle directive.Can you correct me what went wrong?
Below is my requirement
Invalid input
12346789-invalid format
Qswe1234-invalid format

If user enters valid input then it should format
Valid input
123 ---> 123.00
123.4--->123.40
12345--->123.45
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40383226
test page : http://jsfiddle.net/4HRJu/12/
                   
                     if(inputvalue) {
                         var x = inputvalue;
                         while(x>999) x = x / 10;
                         x = (x+"").split(".");
                         if(x.length<2) x.push("0");
      return ((x[0] + "." + x[1] ) * 1).toFixed(2);

Open in new window

0
 

Author Comment

by:ksd123
ID: 40383518
Thank you so much,It's working fine in following scenarios
123 ---> 123.00
123.4--->123.40
12345--->123.45

But still it is failing in  following scenarios and want to show expected output (error message) for below scenarios.The valid input must have 3 digits with 2 decimals

i/p                actual o/p     expected o/p
123456-->        123.46             Invalid Format error message
1234567-->      123.46             Invalid Format error message
12            -->      12.00               Invalid Format error message
1              ->         1.00                Invalid Format error message
abcdef    -->     NaN                Invalid Format error message
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
output in HTML format powershell 6 48
Expanding/Collapsing Tree on SharePoint List 29 62
Page link not showing on Mobile Device 3 49
Jquery syntax 12 29
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question