jquery-validate.js验证selcet、checkbox、radio

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_21859119/article/details/83062823

<form class="public-profile" action="/account/profile" method="post" id='public-profile-form'>
	<select name="like_product" class="form-control">
	        <option value="">Choose the product you like</option>
	        <option value="office">Electronics, Computers &amp; Office</option>
	        <option value="tools">Home, Garden, Pets &amp; Tools</option>
	        <option value="grocery">Food &amp; Grocery</option>
	        <option value="health">Beauty &amp; Health</option>
	        <option value="baby">Toys, Kids &amp; Baby</option>
	        <option value="jewelry">Clothing, Shoes &amp; Jewelry</option>
	        <option value="handmade">Handmade</option>
	        <option value="outdoors">Sports &amp; Outdoors</option>
	        <option value="industrial">Automotive &amp; Industrial</option>
	 </select>
	 <input type="submit" class="btn " id="update-profile" value="Update profile">
</form>

$('#public-profile-form').validate({
        rules:{
            like_product: {
                required: true
            }
        },
        messages: {
            like_product: {
                required: "please select the products you like"
            }
        },
        errorPlacement: function (error, element) { //指定錯誤信息位置
            if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
                var eid = element.attr('name'); //獲取元素的name屬性
                error.appendTo(element.parent()); //將錯誤信息添加當前元素的父結點後面
            } else {
                error.insertAfter(element);
            }
        }
    });

效果图：