jquery validation for checkbox not working in mvc 5

i have a view in which i have applied a validation for checkbox which is not working, it is showing me the jquery error but it is not able to stops the form submission,please help.. here is my view

@model Sample.ViewModels.ViewModelRole
<div>
    <h2>Role Edit</h2>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#EditRole').validate({
            rules: {
                tags: {
                    required: true
                }
            }
        });

    $('#btn-gn').click(function () {
        var list = [];
        $('#MySelection input:checked').each(function () {
            list.push(this.name);
        });
        // now names contains all of the names of checked checkboxes
        $.ajax({
            url: '@Url.Action("RoleEdit","Role")',
            type: 'POST',
            data: { Parameters: list},
            success: function (result) {

            },
            error: function (result) {

            }
        });   //end ajax
    });

});
</script>
    @using (Html.BeginForm("RoleEdit", "Role", FormMethod.Post, new { @Id = "EditRole", name = "EditRole" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)

        @Html.HiddenFor(m => m.Role.RoleId)
        @Html.Hidden("InitialRoleName", Model.RoleName)
        <div class="row">
            <div class="col-md-2 col-sm-2">
                @Html.LabelFor(m => m.RoleName, new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-3 col-sm-4">
               @Html.TextBoxFor(m => m.RoleName, new { style = "width: 300px;" })
                @Html.ValidationMessageFor(m => m.RoleName)

            </div>
        </div>

         <div class="row">
             <div class="col-md-2 col-sm-4">
                 @Html.LabelFor(m => m.Description, new { @class = "control-label col-md-2" })
             </div>
                <div class="col-md-3 col-sm-3">
                     @Html.TextAreaFor(m => m.Description, new { style = "width: 300px;" })
                    @Html.ValidationMessageFor(m => m.Description)
                </div>
            </div>
            @* Testing starts*@
            <div class="main-content">
                <div class="permissions-hd">
                    Permission
                </div>
                <div id="MySelection">
                    @{
        List<PreFlight.ViewModels.PermissionVM> permissions = ViewBag.Permissions;
        foreach (var permission in permissions)
        {
            <div class="row">
                <div class="col-md-2 col-sm-4">
                    <input type="checkbox"
                           name="tags"
                           class="no-margin"
                           id="=ids" value="@permission.ID"
                           @(Html.Raw(permission.IsSelected ? "checked=\"checked\"" : "")) />
                </div>
                <div class="col-md-5 col-sm-5">
                    @permission.Name
                </div>
            </div>
        }
                    }
                </div>
            </div>
            @* Testing ends*@
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" />
                    <span id="validationMessage" />
                </div>
            </div>

        }

Note: Everything is working Fine except this issue, please help how can i stop the form submission until the validation of the checkbox.