Group Validation using Jquery

To validate more than one control using same Reg Ex, I have tried as follows.

It may be simple. But i have tried this for Starting up validation methods using Jquery.

index.html

<style type=”text/css”>

td{
height:50px;
vertical-align : top ;
}
   
.inputError{
background-color: #FFFFD5;
border: 2px solid red;
color: red;
}
   
.normaltext{
background-color:white;
color : black ;
border: black 1px solid;
}
.errorMessage{
color: red;
display: block;
font-family: tahoma;
font-size: 12px;
height: 10px;
margin-top: 4px;
}

</style>

<table cellspacing=”5″ cellpadding=”5″>

<tr>

    <td> Text Only</td><td>

    <input name=”textonly” type=”text”>
    <span class=”errorMessage”></span>
    </td>

    </tr>

    <tr><td>Text Only 2</td><td>

    <input name=”textonly” type=”text”>
    <span  class=”errorMessage”></span>
    </td>

    </tr>

    <tr><td>Number Only</td>

    <td><input name=”numberonly” type=”text”>
    <span  class=”errorMessage”></span></td>
   
    </tr>

</table>

Script:

<script type=”text/javascript”>

$(document).ready(function(){

 var textonlyErrorMessage =”Name should only contain text”;

var numberonlyErrorMessage = “Numeric characters only allowed”;

$(“input:text”).addClass(“normaltext”);

    $(“input:text[name=’textonly’]”).keyup(function(){

    if(this.value.match(/^\s*[a-zA-Z]+\s*$/) == null && this.value.length>0)

    {
       $(this).removeClass(“normaltext”).addClass(“inputError”);
      $(this).parent().find(“.errorMessage”).html(textonlyErrorMessage);
    }

    else

    {

    $(this).addClass(“normaltext”);
    $(this).parent().find(“.errorMessage”).html(“”);
    }

    })

    $(“input:text[name=’numberonly’]”).keyup(function() {

    if(this.value.match(/^\d*[0-9]+\d*$/) == null && this.value.length>0){

    $(this).removeClass(“normaltext”).addClass(“inputError”);
  
    $(this).parent().find(“.errorMessage”).html(numberonlyErrorMessage);
    }

    else

    {

    $(this).addClass(“normaltext”);
    $(this).parent().find(“.errorMessage”).html(“”);
    }

    })

});

</script>

As given above, This code will group the controls to validate based on its Reg EX. Here i have used “Name” attribute as group identifier.

Note: Remember to include Jquery API Library in script src attribute to run these things without error. ( https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js )