This is to simply validate input while you are typing in php/html using java script. I have tried this in Code Igniter framework with netbeans IDE 7.3 also.
As an example we will see how to validate a text box where only positive numbers are allowed including zero. Later you can customize this code according to your requirements
Your html code for text box will look like this
<input type="text" class="form_text" id="marks" name="marks" onkeyup="validatePositiveNumber(this.value,'errorMarks')"/>
<br/> <span id="errorMarks"></span>
here text box id name is "marks". you can give any name you like
I have used a span to display the error message. Its id is "errorMarks" where you can give any name
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 2 parameters current value of the text box(this.value) and span id to display the error message ("errorMarks")
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,id)
{
// check whether it's empty
if (str.length==0)
{
document.getElementById(id).style.color = 'red';//error font color
document.getElementById(id).innerHTML="Please Enter the Value";//error message
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(id).style.color = 'red';//error font color
document.getElementById(id).innerHTML="Please Enter a valid value";//error message
return false;
}
else
{
// when it's valid showing no error messages at all
document.getElementById(id).innerHTML="";
return true;
}
//end of function
}
</script>
That's it................Enjoy :)
Output immediately after you enter an invalid character
Output immediately after you enter tab key and skip the text box
Further Reference :
on key events: http://www.w3schools.com/jsref/event_onkeypress.asp
more events:http://www.w3schools.com/jsref/dom_obj_event.asp
Code credit : I got this javascript code from one of my friends Mushthaq Rumy with little modifications
Hope it will be useful for you.
As an example we will see how to validate a text box where only positive numbers are allowed including zero. Later you can customize this code according to your requirements
Your html code for text box will look like this
<input type="text" class="form_text" id="marks" name="marks" onkeyup="validatePositiveNumber(this.value,'errorMarks')"/>
<br/> <span id="errorMarks"></span>
here text box id name is "marks". you can give any name you like
I have used a span to display the error message. Its id is "errorMarks" where you can give any name
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 2 parameters current value of the text box(this.value) and span id to display the error message ("errorMarks")
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,id)
{
// check whether it's empty
if (str.length==0)
{
document.getElementById(id).style.color = 'red';//error font color
document.getElementById(id).innerHTML="Please Enter the Value";//error message
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(id).style.color = 'red';//error font color
document.getElementById(id).innerHTML="Please Enter a valid value";//error message
return false;
}
else
{
// when it's valid showing no error messages at all
document.getElementById(id).innerHTML="";
return true;
}
//end of function
}
</script>
That's it................Enjoy :)
Output immediately after you enter an invalid character
Output immediately after you enter tab key and skip the text box
Further Reference :
on key events: http://www.w3schools.com/jsref/event_onkeypress.asp
more events:http://www.w3schools.com/jsref/dom_obj_event.asp
Code credit : I got this javascript code from one of my friends Mushthaq Rumy with little modifications
Hope it will be useful for you.
