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

@model NzbDrone.Web.Models.NotificationSettingsModel

@{
    Layout = "_SettingsLayout.cshtml";
}

<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>

@section Scripts
{
    <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>
}