<apex:page id="page">
 <apex:form id="form">
 <apex:inputText value="{!a}" id="aid"   html-pattern="[a-z]+"/>
 <apex:commandButton value="Click" onclick="return validate()"/>
 </apex:form>
 <apex:page>

function validate(){
        if(document.getElementById('{!$Component.page.form.aid}').value==''){
          document.getElementById('{!$Component.page.form.aid}').style.border = "solid 1px red";
          return false;
        }
        else{
           return true;
         }
   }

page:form:1:hhm1FirstName

page:form:2:hhm1FirstName

<apex:page>
<style type="text/css">
.border {
    border-color: red;
    border-width: 1px;
    border-style: solid;
}
</style>

    <apex:form>
        ...
            <apex:inputText value="{!item.FirstName}" styleClass="notBlank"/>
        ...
        <apex:commandButton value="Click" onclick="return validate()"/>
    </apex:form>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var j$ = jQuery.noConflict();
function validate() {
    var valid = true;
    j$('input.notBlank').each(function() {
        if (j$(this).val() == '') {
            j$(this).addClass('border');
            valid = false;
        }
    });
    return valid;
}
</script>
</apex:page>

<apex:page id="myPage">
     <apex:variable value="{!1}" var="rowNum"/>

 <table>
    <apex:repeat value="{!yourList}" var="item">
      <tr id="hello{!rowNum}"><td>{!item.Name}</td></tr>
     <apex:variable var="rowNum" value="{!rowNum + 1}"/>
   </apex:repeat>
  </table>
</apex:page>