Validate select via jquery?

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

41 Replies - 18421 Views - Last Post: 23 May 2011 - 04:45 PM

#1 newbie14  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 15-May 11

Validate select via jquery?

Posted 15 May 2011 - 10:22 AM

Dear All,
I have a list of select. The problem now I would like to validate them using jquery? Any idea how to do it?
Is This A Good Question/Topic? 0
  • +

Replies To: Validate select via jquery?

#2 japanir  Icon User is offline

  • jaVanir
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: Validate select via jquery?

Posted 15 May 2011 - 10:49 AM

What do you want to validate? also, do you want to do the validation on submit (of some form) or on change?
You will have to post some code, and provide some more info.
Was This Post Helpful? 0
  • +
  • -

#3 newbie14  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 15-May 11

Re: Validate select via jquery?

Posted 15 May 2011 - 10:59 AM

Dear Japanir,
Here is my link http://183.78.169.54/v3/addRoute.php. First you can try to press the add button you will notice a new row of select box comes out. Now when you press submit is where I want to validate each row the select box should be selected. I have tried like this <select class='required' id='locationFrom[]' name='locationFrom[]' > but is not working. Any idea?
Was This Post Helpful? 0
  • +
  • -

#4 japanir  Icon User is offline

  • jaVanir
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: Validate select via jquery?

Posted 15 May 2011 - 11:13 AM

You can always get a JQuery form validation plugin (google for it there are plenty of these) for a full control on form validation.

In JQuery, to check if no option was selected:
<select id="sel" multiple="multiple">
<option...
</select>

<script...
$(document).ready(function() 
{  
 if (!$("#sel option:selected").length)
  //code...
}

</script>


Also, You can also use Javascript.
Was This Post Helpful? 0
  • +
  • -

#5 newbie14  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 15-May 11

Re: Validate select via jquery?

Posted 15 May 2011 - 11:17 AM

Dear Japanir,
I am actually lost a bit with this jquery validation plugin is different from jquery itself is it? Your idea is put the jquery when I am building select boxes is it? If I want the error message to appear below the select box is that possible is it? How to use javascript to create dynamic select box? Thank you.
Was This Post Helpful? 0
  • +
  • -

#6 japanir  Icon User is offline

  • jaVanir
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: Validate select via jquery?

Posted 15 May 2011 - 03:07 PM

Again, I am not sure I understand what you mean..
JQuery plugins are simply extensions to the JQuery library. they contains new functionality (usually simplified) to the library.
You can google for JQuery plugins and find plenty.

As for the code, are you trying to create select box on the fly? or simply a matter of show\hide?
What exactly are you trying to do?
Was This Post Helpful? 0
  • +
  • -

#7 newbie14  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 15-May 11

Re: Validate select via jquery?

Posted 15 May 2011 - 06:01 PM

Dear Japanir,
The code now can create multiple select box on the fly for each row. The problem when submit I must make sure each select box have value selected thats all. How to validate that? I hope I am clearer now.

View Postjapanir, on 15 May 2011 - 03:07 PM, said:

Again, I am not sure I understand what you mean..
JQuery plugins are simply extensions to the JQuery library. they contains new functionality (usually simplified) to the library.
You can google for JQuery plugins and find plenty.

As for the code, are you trying to create select box on the fly? or simply a matter of show\hide?
What exactly are you trying to do?

Was This Post Helpful? 0
  • +
  • -

#8 japanir  Icon User is offline

  • jaVanir
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: Validate select via jquery?

Posted 16 May 2011 - 01:45 AM

I posted that code example in my prev post.
Here it is:
<script...
$(document).ready(function() 
{  
 if (!$("#sel_id option:selected").length)
  //no options selected,
  //your code in that case here..
}

</script>

note that sel_id should be the Select element id you choose.

This post has been edited by japanir: 16 May 2011 - 01:46 AM

Was This Post Helpful? 0
  • +
  • -

#9 newbie14  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 15-May 11

Re: Validate select via jquery?

Posted 16 May 2011 - 11:43 AM

Dear Japanir,
Below is my full codes. I have implemented your code it works but the problem it only shows one time even though I have many rows of select box. How to make it work only upon submit to validate? Another can I make the validation such as below the select box to appear the message please select? Thank you.

<html> 
    <head> 
       
        <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script> 
        <script src="jquery.validate.js"></script> 
       
        <script> 
        
        $(document).ready(function() {
        	  
            
            function setupFormValidation(form) {
              //$('td:not(:first) select',form).each(function () 
              //{ 
              // if (!$("select option:selected").length)
              // {
              // 	alert("NOt selected");
              // }
              //}
               //no options selected,
                //your code in that case here..

               // $(form).validate().resetForm();
                /*if ($('tbody tr', form).length < 2) {
                	  alert("Must Have End Destination Route");
                }*/
                
               /*$('td:not(:first) select',form).each(function () {
                    $(this).rules('add', {required: true});
                });*/
                /*
                $('td:not(:first) select',form).each(function () {
                    $(this).rules('add', {required: true});
                });*/
               
            }
            
            var form = $("#form1");
            setupFormValidation(form);
 
            var prot = $('tr.prototype').clone().removeClass('prototype');
            $(form).data('prototype', prot);
            
            var id = 0;
 
            // Add button functionality
            $("table.dynatable button.add").click(function() {
                var form = this.form;
                id++;
                
                // Get a new row based on the prototype row
                //var prot = master.find(".prototype").clone();
                var prot = $(form).data('prototype').clone();
                prot.find('[name^="id"]').attr("value", id);
                prot.find('[name^="locationFrom"]').attr('name', 'locationFrom[' + id + ']');
                prot.find('[name^="locationFrom"]').attr('value', '');
                prot.find('[name^="eventFrom"]').attr('name', 'eventFrom[' + id + ']');
                prot.find('[name^="eventFrom"]').attr('value', '');
                prot.find('[name^="locationTo"]').attr('name', 'locationTo[' + id + ']');
                prot.find('[name^="locationTo"]').attr('value', '');
                prot.find('[name^="eventTo"]').attr('name', 'eventTo[' + id + ']');
                prot.find('[name^="eventTo"]').attr('value', '');
                           
                
                $(form).find("tbody").append(prot);
 
                setupFormValidation(form);
                return false;
            });
            
            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {
                var form = this.form;
 
                $(this).closest("tr").remove();
                setupFormValidation(form);
            });
            
            jQuery('.dOnly').live('keyup', function () 
            {     
                 this.value = this.value.replace(/[^0-9\.]/g,''); 
            });
        });
        </script> 
        <style> 
            .dynatable {
                border: solid 1px #000; 
                border-collapse: collapse;
            }
            .dynatable th,
            .dynatable td {
                background-color:#ccc; 
                font-size:14px;
                font-color:#ffffff;
                font-family:Calibri;
            }
            .dynatable .prototype {
                
            }
            label.error 
            { 
            	display: block; 
            	color:red;
            }
            
            td { vertical-align: top; }
            
        </style> 
    </head> 
    <body> 
        <form action="" method="post" name="form1" enctype="multipart/form-data" id=form1 > 
        <table class="dynatable"> 
            <thead> 
                <tr> 
                    <th>ID</th> 
                    <th>Location From</th> 
                    <th>Event From</th> 
                    <th>Location To</th> 
                    <th>Event To</th> 
                    <th><button class="add">Add</button></th> 
                </tr> 
            </thead> 
            <tbody> 
              
              
                
                    <tr class="prototype">
                    	 
                        <td><input type="text" name="id[<?=$count;?>]" value="0" /></td> 
                        <?php
												  $selectQuery1 ="Select tblLocationFrom.locationFromID,tblLocationFrom.locationFrom From tblLocationFrom"; 
													$result1 = mysql_query($selectQuery1);
													$n1 = mysql_num_rows($result1);	
													
													echo "<td><select class='required' id='locationFrom[]' name='locationFrom[]' >";
													echo "<option value=0>-Select Location From-</option>";
													if($n1>0)
													{
														while($row1 = mysql_fetch_array($result1, MYSQL_ASSOC))
														{
														  	echo "<option value=".$row1['locationFromID'].">".$row1['locationFrom']."</option>";
														}
												  }
													echo "</select></td>";
													?>
													<script>
													$(document).ready(function() 
													{  
													 if (!$("#locationFrom option:selected").length)
													 {
													     alert("Select location");
													 }
													});
													</script>
													<?
													$selectQuery2 ="Select tblLocationEvent.locationEventID,tblLocationEvent.locationEvent From tblLocationEvent"; 
													$result2 = mysql_query($selectQuery2);
													$n2 = mysql_num_rows($result2);	
													
													echo "<td><select class='select' id='eventFrom[]' name='evenyFrom[]' >";
													echo "<option value=0>-Select Event From-</option>";
													if($n2>0)
													{
														while($row2 = mysql_fetch_array($result2, MYSQL_ASSOC))
														{
														  	echo "<option value=".$row2['locationEventID'].">".$row2['locationEvent']."</option>";
														}
												  }
													echo "</select></td>";

                          $selectQuery3 ="Select tblLocationTo.locationToID,tblLocationTo.locationTo From tblLocationTo"; 
													$result3 = mysql_query($selectQuery3);
													$n3 = mysql_num_rows($result3);	
													
													echo "<td><select class='select' id='locationFrom[]' name='locationFrom[]' >";
													echo "<option value=0>-Select Location From-</option>";
													if($n3>0)
													{
														while($row3 = mysql_fetch_array($result3, MYSQL_ASSOC))
														{
														  	echo "<option value=".$row3['locationToID'].">".$row3['locationTo']."</option>";
														}
												  }
													echo "</select></td>";
													
													
													$selectQuery4 ="Select tblLocationEvent.locationEventID,tblLocationEvent.locationEvent From tblLocationEvent"; 
													$result4 = mysql_query($selectQuery4);
													$n4 = mysql_num_rows($result4);	
													
													echo "<td><select class='select' id='eventTo[]' name='evenyTo[]' >";
													echo "<option value=0>-Select Event From-</option>";
													if($n4>0)
													{
														while($row4 = mysql_fetch_array($result4, MYSQL_ASSOC))
														{
														  	echo "<option value=".$row4['locationEventID'].">".$row4['locationEvent']."</option>";
														}
												  }
													echo "</select></td>";
													
                        
                        ?>
                        
                        
                        <td><button class="remove">Remove</button> 
                    </tr> 
              
                
            </tbody>     
        </table> 
        <input class="buttons" type="Submit" name="Submit" value="Submit"> 
    </form> 
    </body> 
</html>






View Postjapanir, on 15 May 2011 - 11:13 AM, said:

You can always get a JQuery form validation plugin (google for it there are plenty of these) for a full control on form validation.

In JQuery, to check if no option was selected:
<select id="sel" multiple="multiple">
<option...
</select>

<script...
$(document).ready(function() 
{  
 if (!$("#sel option:selected").length)
  //code...
}

</script>


Also, You can also use Javascript.

Was This Post Helpful? 0
  • +
  • -

#10 japanir  Icon User is offline

  • jaVanir
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: Validate select via jquery?

Posted 16 May 2011 - 12:19 PM

You can see here how to perform any code on form submit:
http://api.jquery.com/submit/
Was This Post Helpful? 0
  • +
  • -

#11 newbie14  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 15-May 11

Re: Validate select via jquery?

Posted 16 May 2011 - 12:47 PM

Dear Japanir,
Thank you. Now I have managed like this.Yes it works fine the pop-up comes out only when I press the submit button. My next challenge is how to put the error message below the select box which are not selected. Another thing is that this line (!$("#locationFrom option:selected").length) is going to check each of row is it?


$(document).ready(function() 
{  
('#form1').submit(function() 
{
 if (!$("#locationFrom option:selected").length)
  {
     alert("Select location");
     return false;
   }
                             
  });	 
});

Was This Post Helpful? 0
  • +
  • -

#12 japanir  Icon User is offline

  • jaVanir
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: Validate select via jquery?

Posted 16 May 2011 - 02:25 PM

You can simply add some div tags below each select box, and add it an error message if no value is selected.
Was This Post Helpful? 0
  • +
  • -

#13 newbie14  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 15-May 11

Re: Validate select via jquery?

Posted 16 May 2011 - 08:49 PM

Dear Japanir,
I have done some thing below. The problem now is that the error message appear only for one row and secondly when I have select a row the message is still there.

echo "</select>				
<div id=labelLocationFromError></div></td>";							?>
<script>								$(document).ready(function() 						{  
          $('#form1').submit(function() {
          if (!$("#locationFrom option:selected").length)
	   {									   document.getElementById("labelLocationFromError").innerHTML="Select Location From";		   // alert("Select location");				        return false;
	   }
        });
});
</script>

Was This Post Helpful? 0
  • +
  • -

#14 japanir  Icon User is offline

  • jaVanir
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: Validate select via jquery?

Posted 17 May 2011 - 02:43 AM

If you want the error message to disappear when an option is selected, use the "change" function, http://api.jquery.com/change/
and update the div accordingly.
Was This Post Helpful? 0
  • +
  • -

#15 newbie14  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 15-May 11

Re: Validate select via jquery?

Posted 17 May 2011 - 03:02 AM

Dear Japanir,
I have added as below but only the first row appear and it always show "Select Location From". How to make it appear and validate each select box.
$("#locationFrom").change(function () 
{           
var str = "";           
$("select option:selected").each(function () 
{                 
str += $(this).text() + " ";               
});           
$("#labelLocationFromError").text(str);         
})         
.change(); 

Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3