ගුරු මුෂ්ටි: JQuery 3 - Form එකක් validate කිරීම

form එකක් submit කරද්දි කොහොමද ඒක JQuery වලින් validate කරන්නෙ කියලා මේ පහල code එකෙන් විස්තර කරන්නම්.

<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 එක අවට මෙහෙම වෙනස් වෙනවා

Name <input type="text" name="uname" id="uname"/>
 <div class="error_msg" style="color: #ff3333;" ></div>

$('#uname').next().html('Please enter a user name'); එකේ .next() කියන එකෙන් uname එකට පස්සෙ තියෙන element එක එහෙම නැත්තම් කලින් .after() එකෙන් දාපු div එක තෝරගන්නවා.

Name <input type="text" name="uname" id="uname"/>
 <div class="error_msg" style="color: #ff3333;">Please enter a user name</div>

කොහොම හරි error message එකක් පෙන්නුවට පස්සෙ var error = false; කියලා කලින් හදලා තියෙන valiable එක error = true කියලා වෙනස් කරනවා.

.hide()
.show()
.add()
.addClass()
.after()
.append()
.appendTo()

.attr()
.before()
.css()
.data()
.prepend()
.prependTo()
.wrap()

.wrapAll()
.remove()
.removeAttr()
.removeClass()
.removeData()
.replaceAll()
.replaceWith()

අන්තිමට if(error) return false; එකෙන් error එකක් තියෙනවනම් false කියන එක return කරනවා. එකෙන් form එක submit වෙන එක නතර වෙනවා. submit function එක ඇතුලෙ false කියලා return වෙනවනම් form එක submit වෙන්නෙ නෑ.

ඉස්සල්ලා කිව්ව $('.error_msg').remove(); එකෙන් කරන්නෙ form එක submit කරනකොට කලින් ආපු error_msg මකලා දානවා.

ගුරු මුෂ්ටි

Pages

JQuery 3 - Form එකක් validate කිරීම

3 comments: