How to perform validations to input fields in page block table or <apex:repeat>?

Question

I have a page block table with 5 columns - First Name, Last Name, email and phone number. 4 of them are apex:input component and one remove command button. And i can add new rows on click of a "Add Row" button and remove row by clicking "Remove button".

How can i validate these input fields?

One way i found was using javascript, where if i know the id of the apex component say

 <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>

On click of a button i call a javascript function validate(). which is as follows-

    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;
         }
   }

In this case i would know the exact id of the apex component so that i can validate using javascript, but what happens in page block table is that id will be different for each row and it is dynamically generated. So any idea on how to add validation to that? ex: id of 1st row 1st column would be -

page:form:1:hhm1FirstName

and 2nd row 1st column would be

page:form:2:hhm1FirstName

Answer 1

While IDs have to be unique (CSS) classes do not. So as well as being useful to apply CSS styles, classes can be used as markers and tools like jQuery are good at matching and iterating over elements that have such markers:

<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>

Answer 2

Try something like below to generate dynamic Ids. You can have an <apex:variable /> for this.

<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>

With the help of this you can generate unique ids and rest of the validation process is already there with you :)