It’s a good practice to validate your form using script before sending because it’s giving quick response than server validity. But keep in mind server validation is always necessary because JavaScript may be disabled by the user. So server validation is mandatory. I am presenting complete code for validating a check box, textbox and file. My main focus is on file validating because file validation is complicated task for new web developers So this will help you a lot.
<html>
<head>
<title>Java script form validation ; Girfa</title>
<script language="javascript">
function validate_mar_news(pic,fl,code) //validate add news pic for home page marquee
{
var check_box=document.getElementById(pic);
var file=document.getElementById(fl);
var code=document.getElementById(code);
var flag=true;
if(check_box.value=="Select Page Number")
{
flag=false;
alert("Please select a picture number from check box");
check_box.focus();
}
else if(file.value=="")
{
alert("Please select picture");
flag=false;
file.focus();
}
else if(code.value=="")
{
alert("Please enter code");
flag=false;
code.focus();
}
else
{
var FileSizeMB = (parseInt((file.files[0].size/1024)/1024));
if(FileSizeMB>0)
{
alert('File size Exceed ,Valid file size upto 700KB');
file.focus();
flag=false;
}
else
{
return(validate_file(fl));
}
}
return(flag);
}
function validate_file(fn) //Validate file extension
{
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
var file=document.getElementById(fn);
var sFileName = file.value;
if (sFileName.length > 0)
{
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++)
{
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase())
{
blnValid = true;
break;
}
}
}
if(blnValid==false)
{
alert("Invalid file type, Only picture file is allowed");
file.focus();
}
return(blnValid)
}
</script>
</head>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']?>" enctype="multipart/form-data">
<table>
<tr>
<td align="right">Select Page number : </td>
<td>
<select name="myselect" id="myselect">
<option>Select Page Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br /><br />
</td>
</tr>
<tr>
<td align="right">Select Picture :</td>
<td><input type="file" name="file" id="file" /><br /></td>
</tr>
<tr>
<td align="right">Captcha : </td>
<td><img src="../captcha/captcha.php" /><br /><br /></td>
</tr>
<tr>
<td align="right">Enter Code : </td>
<td><input type="text" name="code" id="code" /><br /><br /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Upload" name="submit" onclick="return validate_mar_news('myselect','file','code');"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>Java script form validation ; Girfa</title>
<script language="javascript">
function validate_mar_news(pic,fl,code) //validate add news pic for home page marquee
{
var check_box=document.getElementById(pic);
var file=document.getElementById(fl);
var code=document.getElementById(code);
var flag=true;
if(check_box.value=="Select Page Number")
{
flag=false;
alert("Please select a picture number from check box");
check_box.focus();
}
else if(file.value=="")
{
alert("Please select picture");
flag=false;
file.focus();
}
else if(code.value=="")
{
alert("Please enter code");
flag=false;
code.focus();
}
else
{
var FileSizeMB = (parseInt((file.files[0].size/1024)/1024));
if(FileSizeMB>0)
{
alert('File size Exceed ,Valid file size upto 700KB');
file.focus();
flag=false;
}
else
{
return(validate_file(fl));
}
}
return(flag);
}
function validate_file(fn) //Validate file extension
{
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
var file=document.getElementById(fn);
var sFileName = file.value;
if (sFileName.length > 0)
{
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++)
{
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase())
{
blnValid = true;
break;
}
}
}
if(blnValid==false)
{
alert("Invalid file type, Only picture file is allowed");
file.focus();
}
return(blnValid)
}
</script>
</head>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']?>" enctype="multipart/form-data">
<table>
<tr>
<td align="right">Select Page number : </td>
<td>
<select name="myselect" id="myselect">
<option>Select Page Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br /><br />
</td>
</tr>
<tr>
<td align="right">Select Picture :</td>
<td><input type="file" name="file" id="file" /><br /></td>
</tr>
<tr>
<td align="right">Captcha : </td>
<td><img src="../captcha/captcha.php" /><br /><br /></td>
</tr>
<tr>
<td align="right">Enter Code : </td>
<td><input type="text" name="code" id="code" /><br /><br /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Upload" name="submit" onclick="return validate_mar_news('myselect','file','code');"/>
</td>
</tr>
</table>
</form>
</body>
</html>
No comments:
Post a Comment