validation

validation

Dear Sir

I did validation for first name in my project, But in the same form if I am validating to last name the validation is not performing well it is only focussing to that last name field.
Any one can guess me how to do this and the following code is here

" <script>
$(document).ready(function(){
$("button").click(function(e){

//validating firstname
var firstname = $("#fname").val();
var regfname = /^[a-zA-Z]+$/;
if(!firstname.match(regfname) || firstname.length==0){
$("#fname_validation").show();
$("#fname").focus();
return false;
}
else{
$("#fname_validation").hide();
}

//validating lastname
var lastname = $("#lname").val();
var reglname = /^[a-zA-Z]+$/;
if(!lastname.match(reglname) ||lastname.length==0){
$("#lname_validation").show();
$("#lname").focus();
return false;
}
else{
$("#lname_validation").hide();
}
});
});

</script>"

and the html file is

"
div class="row">
                <label class="text-success" for="name">First name:</label><br />
                <input id="fname" name="fname" type="text" value="" placeholder="First name" class="form-control" size="50" aria-describedby="basic-addon1" /><br />
                <span id="fname_validation" class="error">Enter your name only in characters</span>
                </div>
  
  
  <div class = "row">
  <div class="input-group">
                    <label class="text-success" for="name">Last name:</label>
                      <input type="text" class="form-control" size="50"  class="form-control" name = "lname" id="lname" placeholder="last name" aria-describedby="basic-addon1" required = "required">
                      <span id="lname_validation" class="error"></span>
</div><!--input-group for last name-->
</div><!--row-->
"