Solved

Help with validating data entered in Masked Input control

Posted on 2013-01-09
14
240 Views
Last Modified: 2013-02-21
Hi

How do i modify this script to make sure all required data is entered, currently when i enter a number at the end of the masked input control, for example +__9, the invalid error message does not activate.

 function C1FTL_OnClientBlur(sender, e) {

                var mskinput = $find('<%=C1FTL.ClientID%>');
                var txb = $('#C1FTL_C1TextBox');
                if (mskinput.get_text().trimEnd().length < 4 && mskinput.get_text().trimEnd().length > 0) {
                    alert("Invalid");
                    document.focus();
                    mskinput.focus();

                }

            };

            function C1FTL_OnClientFocus(sender, e) {

                var text = document.getElementById("C1FTL_C1TextBox");
                var txb = $('#C1FTL_C1TextBox');
                var FieldRange = text.createTextRange();
                FieldRange.moveStart('character', 0);
                FieldRange.collapse();
                FieldRange.select();

            };

<cc2:C1MaskedInput ID="C1FTL" runat="server" Mask="&amp;999" Width="30px"
                         style="top: 0px; left: 0px" OnClientBlur="C1FTL_OnClientBlur"
                         OnClientFocus="C1FTL_OnClientFocus"  />

Thanks,

Victor
0
Comment
Question by:vcharles
  • 7
  • 6
14 Comments
 
LVL 12

Expert Comment

by:sivagnanam chandrakanth
ID: 38762044
in your validation you have checked the length less than 4 characters, so the example "+__9" has 4 characters thats why its skipping the condition and error alert is not shown..
0
 

Author Comment

by:vcharles
ID: 38762117
The __ represents space, no data was entered, it should have been +439, the masked control is &999 where 9 only allows numerical values. How do i make sure all three required numerical values are entered?
Thanks.
0
 
LVL 12

Expert Comment

by:sivagnanam chandrakanth
ID: 38762122
Use this, this will take care of all your need with masked input

http://digitalbush.com/projects/masked-input-plugin/
0
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 

Author Comment

by:vcharles
ID: 38762149
Unfortunately, I am not allowed to use additional controls/plugins in this project. Is there a way for the script to look for number of numerical values and if not = 3 activate the alert?
0
 
LVL 12

Expert Comment

by:sivagnanam chandrakanth
ID: 38762176
Yes use ASCII code validation or regular expression validation or ISNAN for individual characters by splitting the values

R.E http://www.w3resource.com/javascript/form/all-numbers.php
0
 

Author Comment

by:vcharles
ID: 38762197
Thanks. Using Javascript below, since I only need three digits, would using var numbers = /^[0-3]+$/;  work? It seems like that part of the code is just to make sure numeric values are entered, don't see where it is testing for number of numeric values entered.


function allnumeric(inputtxt)  
      {  
      var numbers = /^[0-9]+$/;  
      if(inputtxt.value.match(numbers))  
      {  
      alert('Your Registration number has accepted....');  
      document.form1.text1.focus();  
      return true;  
      }  
      else  
      {  
      alert('Please input numeric characters only');  
      document.form1.text1.focus();  
      return false;  
      }  
      }
0
 
LVL 12

Expert Comment

by:sivagnanam chandrakanth
ID: 38762217
yes it is checking only the numeric value not length..

Add this for length

 if(inputtxt.length>3)  
      {  
      alert('Max 3 didgits only');  
      document.form1.text1.focus();  
      return true;  
      }
0
 

Author Comment

by:vcharles
ID: 38762252
Thanks, but still not clear on how to use this code in my project, below is the code I currently have

function C1FTL_OnClientBlur(sender, e) {

                var mskinput = $find('<%=C1FTL.ClientID%>');
                var txb = $('#C1FTL_C1TextBox');
                if (mskinput.get_text().trimEnd().length < 4 && mskinput.get_text().trimEnd().length > 0) {
                    alert("Invalid");
                    document.focus();
                    mskinput.focus();

                }

            };


How would you integrate your code to check for the length of numeric values entered?
I don't understand how does how inputtxt would be recognized in the code above?

function allnumeric(inputtxt)  
      {  
      var numbers = /^[0-9]+$/;  
  if(inputtxt.length>3)  
      {  
      alert('Max 3 didgits only');  
      document.form1.text1.focus();  
      return true;  
      }
0
 
LVL 12

Expert Comment

by:sivagnanam chandrakanth
ID: 38762277
Try this

function C1FTL_OnClientBlur(sender, e) {

                var mskinput = $find('<%=C1FTL.ClientID%>');
                var txb = $('#C1FTL_C1TextBox');
                if (mskinput.get_text().trimEnd().length > 3 && mskinput.get_text().trimEnd().length > 0) {
                    alert("Maximum 3 digits only");
                    document.focus();
                    mskinput.focus();

                }
				var numbers = /^[0-9]+$/;   
      if(mskinput.value.match(numbers))   
      {   
      alert('Your Registration number has accepted....');   
      
      return true;   
      }   else{
		  alert('Please input numeric characters only');   		  
		  return false;   
	  }

            };
			
			
	

Open in new window

0
 

Author Comment

by:vcharles
ID: 38762382
I am getting error message:

Microsoft JScript runtime error: 'value' is null or not an object

On line:  if (mskinput.value.match(numbers)) {


Code:

function C1FTL_OnClientBlur(sender, e) {

                var mskinput = $find('<%=C1FTL.ClientID%>');
                var txb = $('#C1FTL_C1TextBox');
                if (mskinput.get_text().trimEnd().length < 3 && mskinput.get_text().trimEnd().length > 0) {
                    alert("3 digits Required");
                    document.focus();
                    mskinput.focus();

                }
                var numbers = /^[0-9]+$/;
                if (mskinput.value.match(numbers)) {
                    alert('Your Registration number has accepted....');

                    return true;
                } else {
                    alert('Please input numeric characters only');
                    return false;
                }

            };
0
 
LVL 12

Expert Comment

by:sivagnanam chandrakanth
ID: 38762449
Are you sure mskinput has input field value?
0
 
LVL 20

Accepted Solution

by:
informaniac earned 500 total points
ID: 38762502
if (mskinput.get_element().value.match(numbers)) {

Open in new window


Or I guess as used above should be used again
if (mskinput.get_text().value.match(numbers)) {

Open in new window

0
 

Author Comment

by:vcharles
ID: 38762784
Yes data is in the  c1ftl Lasker Input control
0
 

Author Comment

by:vcharles
ID: 38764702
I tried the code below but the invalid alert does not triggre when I enter less than three digits.

 function C1FTL_OnClientBlur(sender, e) {

                var mskinput = $find('<%=C1FTL.ClientID%>');
                var txb = $('#C1FTL_C1TextBox');
                if (mskinput.get_text().trimEnd().length < 3 && mskinput.get_text().trimEnd().length > 0) {
                    alert("Maximum 3 digits only");
                    document.focus();
                    mskinput.focus();

                }
                var numbers = /^[0-9]+$/;
                if (mskinput.get_text().trimEnd().length = 3 && mskinput.get_text().trimEnd().length > 0) {
                    alert('Data accepted....');

                    return true;
                } else {
                    alert('Maximum 3 digits only');
                    return false;
                }

            };
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

679 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