Page 1 of 1
Client Side Form validation Help!
Posted: Sat Dec 02, 2006 12:49 pm
by maxvee8
i have been searching form client side form validation script for ages but i cant find any that is useful.
i need validation to check:
1. URL entered is correct format if not display message if it is correct post the form
2. tell it to post nothing if the url field is left at "http://"
3. Check that the fields have something entered
any help apreciated !
Posted: Sat Dec 02, 2006 12:56 pm
by aaronhall
Before you do any work on this, take into consideration that it's not tricky to turn off javascript.
Javascript has an onSubmit event, which could call a function that does this validation, and spits out a message via alert() if something doesn't look right. If you return false to an onSubmit event, the form will not submit. Look into getElementById to get the text from the input fields.
Posted: Sat Dec 02, 2006 1:18 pm
by me!
Java validation is easy to go around, there are a good number of people that turn off Java. So make sure that you are also validating on the server side as well.
This is what a form can look like with java validation for a text field, it requires min of 2 and max of 30.
Code: Select all
<form method="POST" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" S-Email-Address="send_to_e_mail_address@server.com" S-Email-Format="TEXT/PRE" -->
<p>
<!--webbot bot="Validation" S-Data-Type="String" B-Value-Required="TRUE" I-Minimum-Length="2" I-Maximum-Length="30" -->
<input type="text" name="testinput" size="20" maxlength="30"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
Posted: Mon Dec 11, 2006 10:58 am
by neel_basu
You Can Use This JavaScript To Validate The Form
===================================
Code: Select all
function chk_valid()
{
var hld_element = document.getElementsByTagName("input");
for(i=0;i<=hld_element.length-1;i++)
{
if(!hld_element[i].value)
{
alert("You Havn't Entered Your :"+hld_element[i].name+"!");
}
}
var get_email = document.getElementById("email")
{
if(get_email.value.indexOf("@") == -1 && get_email.value.indexOf(".") == -1)
{
alert("Your Email Address :'" + get_email.value + "' Is Not Valid\n Please Enter A Valid Email Address");
}
}
var get_url = document.getElementById("url")
{
if(get_url.value.indexOf("http://") == -1 && get_url.value.indexOf(".") == -1)
{
alert("You Havn't Entered :'" + get_url.value + "' Is Not Valid a Valid URL\n Please Enter A Valid URL");
}
}
}
And Then This HTML In Your Body
=======================
Code: Select all
<form name="valid" onsubmit="chk_valid()">
Name: <input type="text" name="name" value="" size="20"><br>
URL: <input type="text" name="url" value="" size="20" id="url"><br>
email: <input type="text" name="email" value="" size="20" id="email"><br>
<input type="submit" value="submit">
</form>
And So The Compleate HTML Page Is
==========================
Code: Select all
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Name</title>
<script language="javascript" type="text/javascript">
function chk_valid()
{
var hld_element = document.getElementsByTagName("input");
for(i=0;i<=hld_element.length-1;i++)
{
if(!hld_element[i].value)
{
alert("You Havn't Entered Your :"+hld_element[i].name+"!");
}
}
var get_email = document.getElementById("email")
{
if(get_email.value.indexOf("@") == -1 && get_email.value.indexOf(".") == -1)
{
alert("Your Email Address :'" + get_email.value + "' Is Not Valid\n Please Enter A Valid Email Address");
}
}
var get_url = document.getElementById("url")
{
if(get_url.value.indexOf("http://") == -1 && get_url.value.indexOf(".") == -1)
{
alert("You Havn't Entered :'" + get_url.value + "' Is Not Valid a Valid URL\n Please Enter A Valid URL");
}
}
}
</script>
</head>
<body>
<form name="valid" onsubmit="chk_valid()">
Name: <input type="text" name="name" value="" size="20"><br>
URL: <input type="text" name="url" value="" size="20" id="url"><br>
email: <input type="text" name="email" value="" size="20" id="email"><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Posted: Mon Dec 11, 2006 11:07 am
by CoderGoblin
Even if you validate the code in javascript it is a good idea to validate it on your server side (php) before inserting into your database. Sending get/post data is easy if you know what form values are required and without checking you are becoming easier access for anybody wanting to hack your database.
As for people saying a lot of people turn of javascript, does anybody have any figures for this ? Generally I find most people have javascript on, as most sites now require javascript. Saying that for accessibility, you should design for non-javascript users even if it is a simple
Code: Select all
<noscript><input type="submit"></noscript>
.
Posted: Mon Dec 11, 2006 11:37 am
by neel_basu
CoderGoblin wrote:a lot of people turn of javascript
Still Now I Didn't Find Such A Single Visitor Who Has Turned It Off
Posted: Mon Dec 11, 2006 12:33 pm
by matthijs
From the top of my head around 5-10% of people browse with js turned of. But don't forget the many people surfing with alternative devices, not being able to use js (some screenreaders). And last, more people surfing with their phones, also without js or only partial js support.
And as others have said you need server side validation anyway, so why not build it first without any js and only then add client side validation to make the form more user friendly for those with javascript enabled.
Posted: Mon Dec 11, 2006 12:39 pm
by neel_basu
For Server Side Form Validation This Post Might Help You Cause Is About The Same Matter
==========================================================
viewtopic.php?p=337797#337797