0 Replies - 1345 Views - Last Post: 03 December 2012 - 08:23 PM

#1 ninechances  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 187
  • Joined: 08-February 10

JQuery Select Box Validation

Posted 03 December 2012 - 08:23 PM

HTML
<form class="form-horizontal" method="POST" name="basic_validate" id="basic_validate" novalidate="novalidate" action="#">
<div class="control-group">
  <label class="control-label">State</label>
  <div class="controls">
    <select name="state" id="state" class="required">
      <option selected="selected" disabled="disabled">Select State</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>    
      <option value="CA">California</option>    
      <option value="CO">Colorado</option>    
      <option value="CT">Connecticut</option>    
      <option value="DE">Delaware</option>
      Etc...    
     </select>
   </div>
 </div>
<button type="submit" value="Submit" class="btn">
</form>



JQuery
$(document).ready(function(){
	
    // Form Validation
    $("#basic_validate").validate({
		rules:{
			state:{
				required:true
			},
		},
		errorClass: "help-inline",
		errorElement: "span",
		highlight:function(element, errorClass, validClass) {
			$(element).parents('.control-group').addClass('error');
		},
		unhighlight: function(element, errorClass, validClass) {
			$(element).parents('.control-group').removeClass('error');
                        /* took this line out because apparently it displays and keeps success class if you delete text from input and move to another input instead of changing back to error class - any suggestions on this too?
			    $(element).parents('.control-group').addClass('success');
                        */
		}
    });
});



This works for text input but not for my selects. It's not adding the error class to them and displaying the error message. I just need to make sure the form isn't submitted with no value selected/disabled/default option is still the main option - I'm not super good with JQuery so any help is appreciated.


EDIT:
It actually works when I remove this line:
$('select').chosen();



Why can't the error class be written when using jquery.chosen.js?? Extremely weird.

This post has been edited by ninechances: 03 December 2012 - 09:13 PM


Is This A Good Question/Topic? 0
  • +

Page 1 of 1