form එකක් submit කරද්දි කොහොමද ඒක JQuery වලින් validate කරන්නෙ කියලා මේ පහල code එකෙන් විස්තර කරන්නම්.
(මේක ලස්සන නෑ ඉතින්. වෙන වැඩේ විතරයි හිතුවෙ. ලස්සන කලාම වැඩේ තේරෙන්නෙ නෑ. ඕන ටික අඩුම විදිහට ලියලා තියෙන්නෙ. කට්ටිය හිතෙන විදිහට style කරලා ගන්න. මුලින්ම යට තියෙන html form එක තේරෙනවැයි කියලා මම හිතනවා. ඒවත් කියලා දෙන්න බෑ ඉතින්. මේක බලන්න කලින් කලින් jquery ගැන ලියලා තියෙන මුල ඒවා ටිකත් බලලා එනවනම් තමා හොද.)
ඉස්සල්ලා කිව්ව $('.error_msg').remove(); එකෙන් කරන්නෙ form එක submit කරනකොට කලින් ආපු error_msg මකලා දානවා.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#test_form").submit(function (){
var user_name = $('#uname').val();
var password = $('#pwd').val();
var sex = $('input:radio[name=sex]:checked').val();
var status = $('input:checkbox[name=status]:checked').val();
var university = $('#university option:selected').val();
$('.error_msg').hide();
var error = false;
var message_div = '<div class="error_msg" style="color: #ff3333;" ></div>';
if(user_name.length == 0){
$('#uname').after(message_div);
$('#uname').next().html('Please enter a user name');
error = true;
}
if(password.length == 0){
$('#pwd').after(message_div);
$('#pwd').next().html('Please enter a Password');
error = true;
}
if(!sex){
$('input[value=male]').before(message_div);
$('input[value=male]').prev().html('Please select Sex');
error = true;
}
if(!status){
$('input[value=student]').before(message_div);
$('input[value=student]').prev().html('Please check a Status');
error = true;
}
if(university == 'null'){
$('#university').after(message_div);
$('#university').next().html('Please select a Universitye');
error = true;
}
if(error) return false;
});
});
</script>
</head>
<body>
<fieldset>
<legend>Test Form </legend>
<form id="test_form" method="post">
Name <input type="text" name="uname" id="uname"/><br/><br/>
Password <input type="password" name="pwd" id="pwd"/><br/><br/>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female<br/><br/>
<input type="checkbox" name="status" value="student" /> Student<br/>
<input type="checkbox" name="status" value="employer" /> Employer<br/><br/>
University
<select id="university">
<option value="null" selected="selected">Select University</option>
<option value="uoc">Colombo</option>
<option value="uom">Moratuwa</option>
<option value="uop">Peradeniya</option>
<option value="uor">Ruhuna</option>
</select><br/><br/>
<input type="submit" value="Submit Form"/>
</form>
</fieldset>
</body>
</html>
(මේක ලස්සන නෑ ඉතින්. වෙන වැඩේ විතරයි හිතුවෙ. ලස්සන කලාම වැඩේ තේරෙන්නෙ නෑ. ඕන ටික අඩුම විදිහට ලියලා තියෙන්නෙ. කට්ටිය හිතෙන විදිහට style කරලා ගන්න. මුලින්ම යට තියෙන html form එක තේරෙනවැයි කියලා මම හිතනවා. ඒවත් කියලා දෙන්න බෑ ඉතින්. මේක බලන්න කලින් කලින් jquery ගැන ලියලා තියෙන මුල ඒවා ටිකත් බලලා එනවනම් තමා හොද.)
- $("#test_form").submit(function (){ පේලියෙන් කියන්නෙ test_form කියන id එක තියෙන form එක submit කරන කොට වැඩ කරන function එක ගැන. ඔය ඇරලා තියෙන් { වරහන ඇතුලෙ තමා ඒක ලියන්නෙ. (form එකක් විතරක් තියෙන නිසා $("form").submit(function (){ කියලත් ලියන්න පුලුවන්.)
- ඊට පස්සෙ මුලින්ම කරන්නෙ form එකේ field වල තියෙන value ටික ගන්න එක.
- var user_name = $('#uname').val(); එකෙන් කියන්නෙ uname කියන id එක තියෙන එකේ value එක ගන්න කියලා. ඒක අරගෙන user_name කියලා varible එකක්ට දාගන්නවා. var password = $('#pwd').val(); එකෙන් කරන්නෙත් ඒවගේම එකක්.
- var sex = $('input:radio[name=sex]:checked').val(); කියන එකේ input:radio කියන එකෙන් මේ පිටුවෙ තියෙන radio button ඔක්කොම ගැන කියවෙනවා. එකෙන් name එක sex වන එකේ value එක ගන්න එක තමා මේ පේලියෙන් කරන්නෙ. (මේ පිටුවටම තියෙන්නෙ එක radio button සෙට් එකක් නිසා $('input:redio').val(); කියලා ලියන්නත් පුලුවන්. තේරම් කරන්න ඕන නිසයි ලිව්වෙ. )
- var status = $('input:checkbox[name=status]:checked').val(); එකත් ඉතින් ඉස්සල්ලා radio button කතන්දරයම තමා. එකෙන් checkbox වල value ගන්නවා.
- var university = $('#university option:selected').val(); මේකෙ university කියලා id එක තියෙන select එකෙන් select කරලා තියෙන option එකේ value එක ගන්නවා.
- $('.error_msg').remove(); එකෙන් .error_msg කියන class එක තියෙන ඔක්කොම මකලා දානවා. ඒකෙ වැදගත් කම පස්සෙ තේරෙයි. var error = false; එකත් පස්සෙ තේරෙයි.
- var message_div = '<div class="error_msg" style="color: #ff3333;" >'+'</div>'; කියන එකෙන් අපි අපේ වැරදි පණිවිඩ error message) පෙන්නන්න div එකක් හදා ගන්නවා.
- if(user_name.length == 0){ එකෙන් user_name කියන variable එකෙ දිග බලනවා. එකෙ මුකුත් නැත්නම් ඒක 0 වට සමාන වෙනවා. එහෙම වුනාම කරන්නෙ මොනවද කියලා සගල වරහන් ඇතුලෙ තියෙන්නෙ.
- $('#uname').after(message_div); එකෙන් කියන්නෙ uname කියලා id එක තියන එකට පස්සෙ අපි කලින් හදාගත්තු div එක දාන්න කියලා. එතකොට uname කියන text field එක අවට මෙහෙම වෙනස් වෙනවා
- $('#uname').next().html('Please enter a user name'); එකේ .next() කියන එකෙන් uname එකට පස්සෙ තියෙන element එක එහෙම නැත්තම් කලින් .after() එකෙන් දාපු div එක තෝරගන්නවා. .prv() කියන එකෙන් uname එකට කලින් (previous) element එක තෝරනවා. .html('Please enter a user name') එකෙන් ඉස්සල්ල තොරගත්ත div එක ඇතුලට Please enter a user name කියන පණිවිඩය ඔබ්බවනවා. දැන් uname එක වටේ html එක මේ වගේ වෙනස් වෙන්න ඕනෙ.
- කොහොම හරි error message එකක් පෙන්නුවට පස්සෙ var error = false; කියලා කලින් හදලා තියෙන valiable එක error = true කියලා වෙනස් කරනවා. පස්සෙ එවටත් එකම ටික තමා කරලා තියෙන්නෙ. පොඩි පොඩි වෙනස්කම් තියනවා. radio button හෝ check box වල එකක්වත් select කරලා නැති වුනාම undefined කියලා තමා value එක එන්නෙ. ඒක select කරලා නැද්ද කියලා බලන්න තමා if(!sex) විදිහට බලන්නෙ. select එකේ මුකුත් select කරලා නැත්තම් ඉබේ select වෙලා තියන එකේ value එක null කියලා තමා තියෙන්නෙ. එකයි if(university == 'null') විදිහට බලන්නෙ. $('input[value=male]').before(message_div); කියන එකෙන් input කියලා තියෙන ඔක්කොම එවගෙන් value=male වන එක තෝරනවා. .before() කියන එකෙන් තොරපු element එකෙ පස්සෙ අපෙ div එක දාගන්නවා. .after() එක වගේමයි. .after() එකේ .prv() තිබ්බා වගේ .before() එකේ .next() කියන එක පාවිච්චි කරනවා. මේකෙ after, before, pre, next වෙනුවට පාවිච්චි කරන්න පුලුවන් ඒවා පහල තියෙනවා.
- .hide()
- .show()
- .add()
- .addClass()
- .after()
- .append()
- .appendTo()
- .attr()
- .before()
- .css()
- .data()
- .prepend()
- .prependTo()
- .wrap()
- .wrapAll()
- .remove()
- .removeAttr()
- .removeClass()
- .removeData()
- .replaceAll()
- .replaceWith()
Name <input type="text" name="uname" id="uname"/> <div class="error_msg" style="color: #ff3333;" ></div>
Name <input type="text" name="uname" id="uname"/> <div class="error_msg" style="color: #ff3333;">Please enter a user name</div>
- අන්තිමට if(error) return false; එකෙන් error එකක් තියෙනවනම් false කියන එක return කරනවා. එකෙන් form එක submit වෙන එක නතර වෙනවා. submit function එක ඇතුලෙ false කියලා return වෙනවනම් form එක submit වෙන්නෙ නෑ.
ඉස්සල්ලා කිව්ව $('.error_msg').remove(); එකෙන් කරන්නෙ form එක submit කරනකොට කලින් ආපු error_msg මකලා දානවා.
