Display remarks on input dynamically with validation

This is to display remarks on input while you are typing in PHP/HTML using java script. It also validate the input dynamically. I have tried this in Code Igniter framework with Netbeans IDE 7.3 also. I recommend this article even for a beginner as it explains everything in a clear manner.

 As an example assume you need to enter white blood cell count (WBC) in a lab result form. Though you are allowed to input any positive number there is a reference range for an healthy person (4000-11000). So if it is  below minimum value(4000) you can display a remark "Low" and if it is above maximum value (11000) you can display "High" otherwise "Normal" while entering the value. Refer the video given below to check how output behaves.

If necessary you can visit this post before reading this as I have advanced the same concept.dynamically validating input
Your html code will look like this

 <td>   

       <input type="text"  class="form-control" id="input1" name="input1"           onkeyup="validatePositiveNumber(this.value,'error1',10000,45000,'remarks1')"   /> 

        <br/> <span id="error1"></span>

</td>
 <td>
                 
         <label for="rangeValues">10000-45000</label>
         <br/> <span id="remarks1" ></span>

  </td>

So with the basic html knowlege you already know that I have created a table and inside that table inside a row as two table data <td> I am gonna apply above coding.

Inside 1st <td>:
I have created a text box. For the name and id you can give any name you like.
I have used a span to display the error message for validation errors. Its id is "error1" where you can give any name
function:
We need to use "onkeyup" event of the text box as we intend to validate its value each and every time user presses some key. I have given the function name as "validatePositiveNumber" which I'm going to write using JavaScript. The function takes 5 parameters current value of the text box(this.value), span id to display the error message ("error1"), minimum value then maximum value of the range which are numbers(10000,45000) and  span id to display the remarks ("remarks1") which is in the 2nd table data <td>

Inside 2nd <td>:
There is a label just to display the reference range values and a span to display remarks

Now it's time to create JavaScript. You can include following JavaScript inside head section or inside the same form as the text box

 <script>
            function isFloat(input)
            { 
                //to check float values. It checks each character

                var i;
                var j=0;//to count number of decimal points in the parameter

                for (i = 0; i < input.length; i++)
                {
                    // Check that current character is a digit(0-9) or dot
                    var c = input.charAt(i);
  
                    if (((c < "0") || (c > "9")))
                    {
                        if(c != ".")
                        {
                           //if it's not a digit or not "." return false
                            return false;
                        } 
                        else        
                        {
                             //if it's "." counting number of decimal points 
                            j++;
                        }     
                    }//end of if()
   
                }//end of for()

                // if all characters are digits n dots then make sure it has at most one decimal point.
                if(j>1)
                {
                    return false;
                }
                return true;
             
                //end of function isFloat()
            }


            function validatePositiveNumber(str,idError,min,max,idRemarks)
            {
                // to validate input number and display reference remarks
                //idError is to display error and idRemarks is to display reference remarks

                // check whether it's empty
                if (str.length==0)
                {
                    document.getElementById(idError).style.color = 'red';//error font color
                    document.getElementById(idError).innerHTML="Please Enter the Value";
                                                                                              //error message
                    document.getElementById(idRemarks).innerHTML=""; //for reference remarks
                    return false;
        
                } 
                else if (!isFloat(str) || str.indexOf(".") == (str.length-1))
                {
                   //check whether it s not a positive float or containing decimal point at the very end

                    document.getElementById(idError).style.color = 'red';//error font color
                    document.getElementById(idError).innerHTML="Please Enter a valid value";
                                                                                                //error message
                    document.getElementById(idRemarks).innerHTML=""; //for reference remarks
                    return false;
                }
                else
                {
                    // when it's valid showing no error messages at all
                    document.getElementById(idError).innerHTML="";
                 
                    //for reference remarks 
                    if(str<min)
                           {
                               document.getElementById(idRemarks).style.color = 'orange';
                               document.getElementById(idRemarks).innerHTML="Low";   
                           }
                    else if(str>max)
                           {
                               document.getElementById(idRemarks).style.color = 'orange';
                               document.getElementById(idRemarks).innerHTML="High";   
                           }
                     else {
                              document.getElementById(idRemarks).style.color = 'black';
                               document.getElementById(idRemarks).innerHTML="Normal";      
                           }

                    return true;//regardless of remarks now since the input is valid we return true
                }//end of else
                //end of function
            }
        </script>

That's it................Enjoy :)

Further Reference :
on key events: http://www.w3schools.com/jsref/event_onkeypress.asp
more events: http://www.w3schools.com/jsref/dom_obj_event.asp

Hope it will be useful for you.