jQuery-validate Example

by Mohd Zaki

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
<form name="checkform" class="form-control" id="checkform" method="post" action="">
<div class="form-group">
<select name="field_name[]" id="field_1">
        <option value="">Select any</option>
        <option value="1">abc</option>
        <option value="2">abc</option>
        <option value="3">abc</option>
        <option value="4">abc</option>
    </select>
    </div>
    <div class="form-group">
    <select name="field_name[]" id="field_2">
        <option value="">Select any</option>
        <option value="5">xyz</option>
        <option value="6">xyz</option>
        <option value="7">xyz</option>
        <option value="8">xyz</option>
    </select>
    </div>
<input class="submit" value="Submit" type="submit">
</form>

CSS

body {
    padding: 20px;
}

label {
    display: block;
}

input.error {
    border: 1px solid red;
}

label.error {
    font-weight: normal;
    color: red;
}

button {
    display: block;
    margin-top: 20px;
}

JavaScript

$(document).ready(function () {

        $("#checkform").validate({
            rules: {
                "field_name[]": "required"
            },
            messages: {
                "field_name[]": "Please select field option",
            }
        });


});