Sonarr/NzbDrone.Web/Views/Settings/Notifications.cshtml

@model NzbDrone.Web.Models.NotificationSettingsModel
@{ Layout = null; }
<style>
    .notifier
    {
        overflow: auto;
    }
    
    .notifier h4
    {
        font-weight: bold;
        margin-bottom: 0px;
        padding-left: 5px;
        padding-top: 3px;
    }
    
    #save_button
    {
        margin-top: 10px;
    }
    
    #smtpTest
    {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 220px;
    }
</style>
<div id="stylized">
    @using (Html.BeginForm("SaveNotifications", "Settings", FormMethod.Post, new { id = "NotificationForm", name = "NotificationForm", @class = "settingsForm" }))
    {
        <div class="jquery-accordion">
            <h3>
                <a href="#">XBMC</a></h3>
            @{Html.RenderPartial("Xbmc", Model);}
            <h3>
                <a href="#">Plex</a></h3>
            @{Html.RenderPartial("Plex", Model);}
            <h3>
                <a href="#">Growl</a></h3>
            @{Html.RenderPartial("Growl", Model);}
            <h3>
                <a href="#">Prowl</a></h3>
            @{Html.RenderPartial("Prowl", Model);}
            <h3>
                <a href="#">Email</a></h3>
            @{Html.RenderPartial("Smtp", Model);}
            <h3>
                <a href="#">Twitter</a></h3>
            @{Html.RenderPartial("Twitter", Model);}
        </div>
            
        <button type="submit" class="save_button" disabled="disabled">
            Save</button>
    }
</div>
<script type="text/javascript">
    $(document).ready(function () {
        //Allow unobstrusive validation of the AJAX loaded form
        $.validator.unobtrusive.parse('#NotificationForm');

        //Validator Settings
        var settings = $.data($('#NotificationForm')[0], 'validator').settings;
        settings.ignore = [];
        settings.focusInvalid = false;
        settings.onfocusout = function (element) { $(element).valid(); };

        var oldHighlight = settings.highlight;
        var oldUnhighlight = settings.unhighlight;

        settings.highlight = function (element, errorClass, validClass) {
            oldHighlight(element, errorClass, validClass);
            $(element).parents('div.ui-accordion-content').prev('h3.ui-accordion-header').addClass('validation-error');
        };
        settings.unhighlight = function (element, errorClass, validClass) {
            oldUnhighlight(element, errorClass, validClass);

            var container = $(element).parents('div.ui-accordion-content');
            if ($(container).children('.' + errorClass).length == 0)
                $(container).prev('h3.ui-accordion-header').removeClass('validation-error');
        };
    });

    $(document).on('change', '.checkClass', function () {
        $("#NotificationForm").validate().form();

        var container = $('div.ui-accordion-content');
        if ($(container).children('.input-validation-error').length == 0)
            $(container).prev('h3.ui-accordion-header').removeClass('validation-error');
    });
</script>