उपयोगकर्ता द्वारा प्रस्तुत फ़ॉर्म को मान्य करना महत्वपूर्ण होता है क्योंकि इसमें अनुचित वैल्यू हो सकती हैं. इसलिए Validation को उपयोगकर्ता को प्रमाणित करना होता है. Database मे हमेंशा Valid values होनी चाहिए इससे Processing मे कोई Difficulties नही आती है. यदि उपयोगकर्ता के द्वारा Input की गई Values उपयुक्त नहीं है तो उपयुक्त को एक Message Display किया जाता है और Valid Values Input करने के लिए कहा जाता है. यह Process Validation कहलाती है.
उपयोगकर्ता के लिए वेबपृष्ठों में प्रपत्रों का उपयोग उनके आवश्यक विवरण दर्ज करने के लिए किया जाता है जो आगे इसे प्रसंस्करण के लिए सर्वर पर भेजते हैं. एक फॉर्म को वेब फॉर्म या HTML फॉर्म के रूप में भी जाना जाता है. ई-कॉमर्स वेबसाइटों, ऑनलाइन बैंकिंग, ऑनलाइन सर्वेक्षण में कुछ नाम रखने के लिए फॉर्म के उपयोग प्रचलित हैं
Form Validation आमतौर पर दो Function पर Work करता है.
Basic Form Validation
JavaScript Validation with image
किसी Form मे कुछ Fields ऐसे होते है जिनको Fill करना Necessary होता है जैसे की Name, Email आदि. यदि आप ये चाहते है की उपयोगकर्ता उस Necessary Field को Empty ना छोड़े तो इसके लिए आप उस Field पर Validation Perform कर सकते है. जब उपयोगकर्ता Form Submit करे तो आप Check कर सकते है की उस Necessary Field मे Value है या नही.
Value नही होने पर आप कोई Message Show कर सकते है. इसके लिए आप DOM का उपयोग कर सकते है क्योंकि Field मे कोई Value है या नहीं ये Dynamically Form Submit करते समय Check किया जायेगा. आप कोई Function Create कर सकते है जो की Submit Button के Click होने पर Call होगा और इसमे आप Document Object के द्वारा उस Field की Value को Check कर सकते है. इसे आपको उन्हीं Fields पर Apply करना चाहिए जिनमे Values डालना Necessary हो.
<!DOCTYPE html>
<html>
<head>
<title>Basic Form Validation Example</title>
</head>
<script type="text/javascript">
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}
else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
</body>
<form name="myform" method="post" action="http://www.tutorialsroot.com"
onsubmit="return validateform()" >
Name: <input type="text" name="name">
Password: <input type="password" name="password">
<input type="submit" value="Submit">
</form>
</body>
</html>
इसमे उपयोगकर्ता को बता दिया जाता है की उसकी Fill की गई जानकारी सही है या गलत.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript validation with Image</title>
</head>
<script type="text/javascript">
function validate(){
var name=document.f1.name.value;
var passwordlength=document.f1.password.value.length;
var status=false;
if(name==""){
document.getElementById("namelocation").innerHTML=
" <img src='http://tutorialsroot.com/css/images/syntex.jpg'/>
Please enter your name";
status=false;
}
else
{
document.getElementById("namelocation").innerHTML="
<img src='http://tutorialsroot.com/css/images/syntex.jpg'/>";
status=true;
}
if(passwordlength<6){
document.getElementById("passwordlocation").innerHTML=
" <img src='http://tutorialsroot.com/css/images/syntex.jpg'/>
Password must be greater than 6";
status=false;
}
else
{
document.getElementById("passwordlocation").innerHTML="
<img src='http://tutorialsroot.com/css/images/syntex.jpg'/>";
}
return status;
}
</script>
</body>
<form name="f1" action="#" onsubmit="return validate()">
<table>
<tr>
<td>Enter Name:</td><td><input type="text" name="name"/>
<span id="nameloc"></span></td>
</tr>
<tr>
<td>Enter Password:</td><td><input type="password"
name="password"/>
<span id="passwordloc"></span></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit"/></td>
</tr>
</table>
</form>
</body>
</html>