Introduction to JavaScript Form Validation
Forms के द्वारा user से information ली जाती है। लेकिन आपको ये check करना जरुरी है की user ने जो values input की वो appropriate है या नहीं है। Database में हमेंशा valid values होनी चाहिए इससे processing में कोई difficulties नहीं आती है।
यदि user के द्वारा input की गई values appropriate नहीं है तो user को एक message display किया जाता है और valid values input करने के लिए कहा जाता है। ये process validation कहलाती है।
HTML में data को validate करने का कोई तरीका नहीं है। Normally validation जब user form को submit कर देता है तो server side पर perform किया जाता है। लेकिन JavaScript आपको client side validation perform करने की ability provide करती है।
Steps of JavaScript Form Validation
- जब भी आप किसी form को validate करते है तो सबसे पहले ये check करते है की सभी fields में values input की गई है या नहीं। यदि ऐसा नहीं है तो user को values input करने का message display किया जाता है।
- इसके बाद ये validate किया जाता है की fields में डाली गई सभी values appropriate form में हो जैसे की age field में कोई string ना input करे आदि।
Validating for Empty Fields
किसी form में कुछ fields ऐसे होते है जिनको fill करना necessary होता है जैसे की name, email आदि। यदि आप ये चाहते है की user उस necessary field को empty ना छोड़े तो इसके लिए आप उस field पर validation perform कर सकते है।
जब user form submit करे तो आप चेक कर सकते है की उस necessary field में value है या नहीं। Value नहीं होने पर आप कोई message show कर सकते है। इसके लिए आप DOM का यूज़ कर सकते है क्योंकि field में कोई value है या नहीं ये dynamically form submit करते समय चेक किया जायेगा।
आप कोई function create कर सकते है जो की submit button के click होने पर call होगा। और इसमें आप document object के द्वारा उस field की value को check कर सकते है। ये एक बहुत ही easy process है। लेकिन इसे आपको उन्हीं fields पर apply करना चाहिए जिनमें values डालना necessary हो। इसका उदाहरण नीचे दिया जा रहा है।
<html>
<head>
<title>Form Validation Demo 1</title>
<script type="text/javascript">
function myFunction()
{
var val = document.myForm.Name.value;
if(val=="")
{
alert("This field can not be left blank");
}
else
{
document.write("Welcome ",document.getElementById("name").value);
}
}
</script>
</head>
<body>
<form name="myForm">
Enter your Name : <input type="text" id="name" name="Name">
<input type="button" value="Submit" onclick="myFunction();">
</form>
</body>
</html>
|
ऊपर दी गयी script निचे दिया गया webpage generate करती है।
Empty fields के लिए check करने के साथ ही आपको ये भी चेक करना होता है की जो values user ने डाली है वो valid है या नहीं। उदाहरण के लिए आपके form में एक password field है और आप चाहते है की user इसमें 8 characters से कम ना input कर सके।
इसके लिए आप user के input को अपने validity criteria से compare करके decision ले सकते है। इसका उदाहरण नीचे दिया गया है।
<html>
<head>
<title>Form Validation Demo 1</title>
<script type="text/javascript">
function myFunction()
{
var name = document.myForm.Name.value;
var pass = document.myForm.Pass.value;
if(name=="")
{
alert("PLEASE ENTER YOUR NAME!!!");
}
else if(pass.length<8)
{
alert("PASSWORD MUST BE AT LEAST 8 CHARACTERS LONG!!!");
}
else
{
document.write("Welcome ",name);
}
}
</script>
</head>
<body>
<form name="myForm">
Enter your Name : <input type="text" name="Name"> <br />
Enter your Password: <input type="password" name="Pass"> <br />
<input type="button" value="Submit" onClick="myFunction();">
</form>
</body>
</html>
|
ऊपर दी गयी script निचे दिया गया web page generate करती है।
0 Comments