Focus the First Input In Any Bootstrap Modal

If you’re accepting user input in a bootstrap modal, or you just want to be more friendly to your keyboard-based users, here’s how to focus the first input element on any bootstrap modal in a global context.

$(document).on('shown.bs.modal', function (e) {
     $(e.target).find(":input").not(".close").filter(":visible:first").focus();
});

A few things are happening here:

  • A delegate event listener is placed on the document (preferably in your jQuery document ready function)
  • The event shown.bs.modal is triggered when a bootstrap modal is opened
  • We find the modal element triggering this function with e.target
  • We exclude the (X) close button from being selected
  • We focus the first visible input element (text, button, etc.) 

The nice thing about doing it this way is it applies to all popup modals across the board. It’s an easy one-size-fits-all solution for large applications!

Validating Bootstrap radio buttons with Kendo UI

Validating radio buttons isn’t supported by the Kendo form validator. Add Bootstrap radio buttons in the mix and you’ve got double the reason to roll your own validation! Fortunately we can use a little jQuery to require the user to select a radio button, and set the chosen value for form submission. Here’s the JavaScript I came up with, triggered on form submit:

$(function () {

    // On form submit, validate and send form by ajax
    $(document).on("click", ":submit", function (event) {

        // Custom validation for required bootstrap radio buttons
        if ($('#radiobuttons').children().filter("[class~='active']").length < 1) {
            $("#validator_msg").show();

        } else {
            $("#validator_msg").hide();
            
             // Set hidden field equal to the chosen radio button's text
            $("#radiovalue").val(
                $('#radiobuttons').children().filter("[class~='active']").text().trim()
             );
             // Submit form by ajax elsewhere
             submit_ajax();
        }

        // Prevent default navigation
        return false;
    });
});

The related HTML uses Bootstrap radio buttons, and emulates the Kendo validator tooltip to alert the user that the field is required:

                                    <!--Hidden radio button field set on submit -->
                                    <input type="hidden id="radiovalue">
                                    <div class="btn-group" data-toggle="buttons" id="radiobuttons" onclick="$('#validator_msg').hide();">
                                        <label class="btn btn-primary">
                                            <input type="radio"> Pineapple
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio"> Coconut
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio"> Lime
                                        </label>
                                    </div>
                                    <!-- Custom kendo tooltip for required radio buttons -->
                                    <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" id="validator_msg" role="alert" style="display: none">
                                        <span class="k-icon k-warning"> </span> Please select a value
                                    </span>

Now when you attempt to submit the form without selecting a radio button, you should see the Kendo validation tooltip prompting you for required input!