asked on

A Validation Style

I want my user input validation like this:

For digits fields, if a user enter a charcter, the box still stays empty. The box show values only digits are entered.

For decimal fields, the box only accepts decimal format otherwise the box stays empty.

How can I achive the purpose? Thanks.

ASKER CERTIFIED SOLUTION

guvera

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Anurag Agarwal

hi
use javascrpit
FOR NUMBERS only :
<HTML>
<HEAD>
<SCRIPT language=Javascript>

</SCRIPT>
</HEAD>
<BODY>
<INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
</BODY>
</HTML

And smilarly for decimal filed!! Try this .

Anurag Agarwal

hi
for decimals
<script language="JavaScript" type="text/javascript">
function zxcFloat(obj){
obj.value=obj.value.replace(/[^-?\d\.]/g,'');
obj.value=parseFloat(obj.value);
}
and call this function
<INPUT id="txtChar" onblur="zxcFloat(this)" type="text" name="txtChar">

Use client side scrpting as when user press key to enter it checks ,if invalid it remains empty . And also in decimal if user enter decimal two times ,second decimal deleted as user move the cursor from textbox. Try. And for message you n give alert or document.getelementid() etc.

minglelinch

ASKER

Thank you all. All answers are great.

isNumberKey is working fine for digit entry.
For decimal entery, isDecimalKey is working fine (the entry only accepts digits and dot), but when furhter checking the format at onblur or lostfocus event, the function seems like not firing at all.
I used -
function isDecimalKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && ((charCode < 48 && charCode != 46) || charCode > 57))
return false;

return true;
}

function isDecimalFormatMatch()
{
var txtWDLost= document.getelementid("txtWDLost").value;
      if (txtWDLost.value.tostring().match(/^\d+\.\d{2}$/)) {
            return true; //alert("match");
      }
      else
      {
       alert("Invalid format.");
            //return false;
      }
}

<asp:TextBox ID="txtWDLost" runat="server" Width="190px" onkeypress="return isDecimalKey(event)" type="text" name="txtWDLost" onblur="return isDecimalFormatMatch()">

Anurag Agarwal

hey
please go through link
https://www.experts-exchange.com/questions/23976512/Validate-the-textbox-with-decimal-values-only-using-javascript.html
It can help you!

Anurag Agarwal

hey minglelinch:
I have tried this javascript ... onKeyUp event.
check this also.It even obstructs user to write second dot .

<html>
<head>
<script language="JavaScript">
  function Decimal( evt ) {
    var msg=evt.value; 
    var w;
    var str=msg.indexOf( "." );
    var ind;
      for ( w=0; w<msg.length; w++ )  {
      ind=msg.substring(w,w+1);
      if ( ind<"0" || ind>"9" )  {
    
           if ( str>0 )
             if ( w==str )  continue;    
       
           msg=msg.substring(0,w);
           evt.value=msg; 
           break;           
      }
    }
  }
</script>
<title>Decimal check</title>
</head>
<body>
<form name="form1" method="post" action="gonder.html">
  <input name="Txt01" type="text" value="" size="30" onKeyUp="Decimal(this)"><br>
</form>
</body>
</html>

Open in new window

minglelinch

ASKER

Hey anurag_onnet:

I tested you code above. It's short and it's working fine except it accepts multple digits after dot.

I used the last version of MaskMoney function in the link you gave me. It's a nice one too.

Thank you. Happy New Year!

SOLUTION

Anurag Agarwal

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

minglelinch

ASKER

Thank you, anurag_onnet. I tested it and it's working as you described. I will use it in the future.