JQuery下拉（选择/选项）验证

Question

我一直在努力解决这个问题，而且我在验证下拉列表时遇到了问题。

$(document).ready(function() {
				
				$('#contact_name').on('input', function() {
					var input=$(this);
					var is_name=input.val();
					if(is_name){input.removeClass("invalid").addClass("valid");}
					else{input.removeClass("valid").addClass("invalid");}
				});
				
				$('#contact_email').on('input', function() {
					var input=$(this);
					var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
					var is_email=re.test(input.val());
					if(is_email){input.removeClass("invalid").addClass("valid");}
					else{input.removeClass("valid").addClass("invalid");}
				});
				
				
				$('#contact_message').keyup(function(event) {
					var input=$(this);
					var message=$(this).val();
					console.log(message);
					if(message){input.removeClass("invalid").addClass("valid");}
					else{input.removeClass("valid").addClass("invalid");}	
				});
		
			$("#contact_submit button").click(function(event){
				var form_data=$("#contact").serializeArray();
				var error_free=true;
				for (var input in form_data){
					var element=$("#contact_"+form_data[input]['name']);
					var valid=element.hasClass("valid");
					var error_element=$("span", element.parent());
					if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;}
					else{error_element.removeClass("error_show").addClass("error");}
				}
				if (!error_free){
					event.preventDefault(); 
				}
				else{
					alert('No errors: Form will be submitted');
				}
			});
			
			
			
		});

#contact label{
			display: inline-block;
			width: 100px;
			text-align: right;
		}
		#contact_submit{
			padding-left: 100px;
		}
		#contact div{
			margin-top: 1em;
		}
		textarea{
			vertical-align: top;
			height: 5em;
		}
			
		.error{
			display: none;
			margin-left: 10px;
		}		
		
		.error_show{
			color: red;
			margin-left: 10px;
		}
		
		input.invalid, textarea.invalid{
			border: 2px solid red;
		}
		
		input.valid, textarea.valid{
			border: 2px solid green;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form id="contact" method="post" action="">
    <!-- Name -->
    <div>
        <label for="contact_name">Name:</label>
        <input type="text" id="contact_name" name="name"></input>
        <span class="error">This field is required</span>
    </div>
    <!-- Email -->
    <div>
        <label for="contact_email">Email:</label>
        <input type="email" id="contact_email" name="email"></input>
        <span class="error">A valid email address is required</span>                
    </div>                        
    <!--Website -->
    <div>
        <label for="contact_website">Website:</label>
        <input type="url" id="contact_website" name="website"></input>
        <span class="error">A valid url is required</span>                              
    </div>                        
    <!-- Message -->
    <div>
        <label for="contact_message">Message:</label>
        <textarea id="contact_message" name="message"></textarea>
        <span class="error">This field is required</span>                                               
    </div>  
    <!-- Drop Down -->
    <div>
      <label for="contact_country">Country: </label>
        <select id="contact_country" name="country">
	      <option value="DFLT">-- Choose Country --</option>
	      <option value="AFG">Afghanistan</option>
	      <option value="ALA">Åland Islands</option>
        </select>
     </div>
    <!-- Submit Button -->
    <div id="contact_submit">             
        <button type="submit">Submit</button>
    </div>
</form>

请运行代码段。我没有包含我试过的Javascript，因为它很乱，但我想知道如何实现这一点。任何帮助将不胜感激。感谢。