validation phone

validation phone

hi

i don’t speak much English , sorry.

how can i use validation phone number ?

i used this address but it was not helpful :

http://www.htmldrive.net/items/show/867/Useful-Masked-Input-jQuery-Plugin

my code :

  1.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.     <title>Designing Modern Web Forms</title>
  6.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  7.     <script type="text/javascript">
  8.      $(document).ready(function() {
  9.     (function($) { $.InFieldLabels = function(label, field, options) { var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels", base); base.showing = true; base.init = function() { base.options = $.extend({}, $.InFieldLabels.defaultOptions, options); base.$label.css('position', 'absolute'); var fieldPosition = base.$field.position(); base.$label.css({ 'left': fieldPosition.left, 'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "") { base.$label.hide(); base.showing = false; }; base.$field.focus(function() { base.fadeOnFocus(); }).blur(function() { base.checkForEmpty(true); }).bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }).change(function(e) { base.checkForEmpty(); }).bind('onPropertyChange', function() { base.checkForEmpty(); }); }; base.fadeOnFocus = function() { if (base.showing) { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity) { base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur) { if (base.$field.val() == "") { base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else { base.setOpacity(0.0); }; }; base.prepForShow = function(e) { if (!base.showing) { base.$label.css({ opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }); }; }; base.hideOnChange = function(e) { if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing) { base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions = { fadeOpacity: 0.5, fadeDuration: 300, labelClass: 'infield' }; $.fn.inFieldLabels = function(options) { return this.each(function() { var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);
  10.         $("#RegisterUserForm label").inFieldLabels();
  11.     });
  12.     </script>
  13.     <script src="../lib/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
  14.     <script src="../src/jquery.maskedinput.js" type="text/javascript"></script>
  15.     <script type="text/javascript">
  16.         $(function() {
  17.             $.mask.definitions['~'] = "[+-]";
  18.             $("#tel").mask("(999) 999-9999");
  19.             $("input").blur(function() {
  20.                 $("#info").html("Unmasked value: " + $(this).mask());
  21.             }).dblclick(function() {
  22.                 $(this).unmask();
  23.             });
  24.         });
  25.       
  26.     </script>
  27.     <style type="text/css">
  28.     /* Add whatever you need to your CSS reset */
  29.     html, body, h1, form, fieldset, input {
  30.       margin: 0;
  31.       padding: 0;
  32.       border: none;
  33.       }
  34.     body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; }
  35.             #registration {
  36.                 color: #fff;
  37.                 background: #2d2d2d;
  38.                 background: -webkit-gradient(
  39.                                 linear,
  40.                                 left bottom,
  41.                                 left top,
  42.                                 color-stop(0, rgb(60,60,60)),
  43.                                 color-stop(0.74, rgb(43,43,43)),
  44.                                 color-stop(1, rgb(60,60,60))
  45.                             );
  46.                 background: -moz-linear-gradient(
  47.                                 center bottom,
  48.                                 rgb(60,60,60) 0%,
  49.                                 rgb(43,43,43) 74%,
  50.                                 rgb(60,60,60) 100%
  51.                             );
  52.                 -moz-border-radius: 10px;
  53.                 -webkit-border-radius: 10px;
  54.                 border-radius: 10px;
  55.                 margin: 10px;
  56.                 width: 430px;
  57.                 }
  58.      #registration a {
  59.           color: #8c910b;
  60.           text-shadow: 0px -1px 0px #000;
  61.           }
  62.         
  63.     #registration fieldset {
  64.           padding: 20px;
  65.           }
  66.         
  67.     input.text {
  68.           -webkit-border-radius: 15px;
  69.           -moz-border-radius: 15px;
  70.           border-radius: 15px;
  71.           border:solid 1px #444;
  72.           font-size: 14px;
  73.           width: 90%;
  74.           padding: 7px 8px 7px 30px;
  75.           -moz-box-shadow: 0px 1px 0px #777;
  76.           -webkit-box-shadow: 0px 1px 0px #777;
  77.           background: #ddd url('img/inputSprite.png') no-repeat 4px 5px;
  78.           background: url('img/inputSprite.png') no-repeat 4px 5px, -moz-linear-gradient(
  79.                center bottom,
  80.                rgb(225,225,225) 0%,
  81.                rgb(215,215,215) 54%,
  82.                rgb(173,173,173) 100%
  83.                );
  84.           background:  url('img/inputSprite.png') no-repeat 4px 5px, -webkit-gradient(
  85.               linear,
  86.               left bottom,
  87.               left top,
  88.               color-stop(0, rgb(225,225,225)),
  89.               color-stop(0.54, rgb(215,215,215)),
  90.               color-stop(1, rgb(173,173,173))
  91.               );
  92.           color:#333;
  93.           text-shadow:0px 1px 0px #FFF;
  94.     }    
  95.      input#email {
  96.          background-position: 4px 5px;
  97.         background-position: 4px 5px, 0px 0px;
  98.         }
  99.       
  100.      input#password {
  101.          background-position: 4px -20px;
  102.         background-position: 4px -20px, 0px 0px;
  103.         }
  104.       
  105.      input#name {
  106.          background-position: 4px -46px;
  107.         background-position: 4px -46px, 0px 0px;
  108.         }
  109.       
  110.      input#tel {
  111.          background-position: 4px -76px;
  112.         background-position: 4px -76px, 0px 0px;
  113.         }
  114.       
  115.     #registration h2 {
  116.         color: #fff;
  117.         text-shadow: 0px -1px 0px #000;
  118.         border-bottom: solid #181818 1px;
  119.         -moz-box-shadow: 0px 1px 0px #3a3a3a;
  120.         text-align: center;
  121.         padding: 18px;
  122.         margin: 0px;
  123.         font-weight: normal;
  124.         font-size: 24px;
  125.         font-family: Lucida Grande, Helvetica, Arial, sans-serif;
  126.         }
  127.       
  128.     #registerNew {
  129.         width: 203px;
  130.         height: 40px;
  131.         border: none;
  132.         text-indent: -9999px;
  133.         background: url('img/createAccountButton.png') no-repeat;
  134.         cursor: pointer;
  135.         float: left;
  136.         }
  137.       
  138.         #registerNew:hover { background-position: 0px -41px; }
  139.         #registerNew:active { background-position: 0px -82px; }
  140.       
  141.      #registration p {
  142.           position: relative;
  143.           }
  144.         
  145.     fieldset label.infield /* .infield label added by JS */ {
  146.         color: #333;
  147.         text-shadow: 0px 1px 0px #fff;
  148.         position: absolute;
  149.         text-align: right;
  150.         top: 3px !important;
  151.         right: 35px !important;
  152.         line-height: 29px;
  153.         }
  154.     </style>
  155.     </head>
  156.     <body dir="rtl">
  157.     <div id="registration">
  158.      <h2>Register</h2>
  159.      <form  id="RegisterUserForm" action="" method="post">
  160.          <fieldset>
  161.              <p>
  162.                 <label for="name">name:</label>
  163.                 <input id="name" name="name" type="text" class="text" value="" />
  164.              </p>
  165.           
  166.              <p>
  167.                 <label for="tel">phone :</label>
  168.                 <input id="tel" name="tel" type="text" class="text" value=""/>
  169.              </p>
  170.           
  171.              <p>
  172.                 <label for="email">Email :</label>
  173.                 <input id="email" name="email" type="email" class="text" value="" />
  174.              </p>
  175.           
  176.              <p>
  177.                 <label for="password">Pass:</label>
  178.                 <input id="password" name="password" class="text" type="password" />
  179.              </p>
  180.              
  181.              <p>
  182.                 <button id="registerNew" type="submit">Register</button>
  183.              </p>
  184.          </fieldset>
  185.      </form>
  186.     </div>
  187.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  188.     <script type="text/javascript">
  189.             $(document).ready(function() {
  190.     (function($) { $.InFieldLabels = function(label, field, options) { var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels", base); base.showing = true; base.init = function() { base.options = $.extend({}, $.InFieldLabels.defaultOptions, options); base.$label.css('position', 'absolute'); var fieldPosition = base.$field.position(); base.$label.css({ 'left': fieldPosition.left, 'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "") { base.$label.hide(); base.showing = false; }; base.$field.focus(function() { base.fadeOnFocus(); }).blur(function() { base.checkForEmpty(true); }).bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }).change(function(e) { base.checkForEmpty(); }).bind('onPropertyChange', function() { base.checkForEmpty(); }); }; base.fadeOnFocus = function() { if (base.showing) { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity) { base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur) { if (base.$field.val() == "") { base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else { base.setOpacity(0.0); }; }; base.prepForShow = function(e) { if (!base.showing) { base.$label.css({ opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }); }; }; base.hideOnChange = function(e) { if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing) { base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions = { fadeOpacity: 0.5, fadeDuration: 300, labelClass: 'infield' }; $.fn.inFieldLabels = function(options) { return this.each(function() { var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);
  191.                                         $("#RegisterUserForm label").inFieldLabels();
  192.                                        });
  193.     </script>
  194.     </body>
  195.     </html>