Replace Bootstrap’s JavaScript Form Validation with jQuery Equivalent – Plus Focus First Invalid

I tend to implement Bootstrap > Documentation > Components > Forms > Validation but feel it makes sense to use jQuery since it is required by many Bootstrap components 🤷‍♂️

Code to replace provided example…

$('.needs-validation').submit(function(event) {
    if ($(this)[0].checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
    }
    $(this).addClass('was-validated');
    $('.form-control:invalid')[0].focus();
});

Note: That last line focuses on the first invalid field 😉

Original Bootstrap Javacript example…

(function() {
    'use strict';
    window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();

Suggestions or improvements? Comment below 😊

VBA EXCEL: Duplicate Comments to Matching Cells of Another Spreadsheet in the Same Workbook

I have an Excel workbook with 13 protected sheets, January through December plus a Summary that needed the same cell comments for each month.

There were 2 options…

  • Type comments into each sheet manually; then update 11 sheets (Feb-Dec) by hand whenever comments need changing 😬
  • Add VBA code to the workbook that automatically duplicates cell comments from January (unprotected) to February through December (protected) when those sheets are activated 😎
Private Sub Workbook_SheetActivate(ByVal Sh As Object)
    Dim xSheetProtected As Boolean
    
    'Can add Case conditions for varying sheet passwords
    Select Case Sh.Index
        Case 1
            'Unprotected
            xPassword = ""
        Case Else
            xPassword = "Pa$$w0rd"
    End Select
    
    If Sh.ProtectContents Then
        If xPassword = "" Then
            MsgBox "Missing password for protected sheet!", vbExclamation
            Exit Sub
        Else
            xSheetProtected = True
            On Error GoTo Invalid_Sheet_Password
            Sh.unprotect Password:=xPassword
        End If
    End If
    
    'Copy January header cell comments to February-December
    If Sh.Index > 1 And Sh.Index < Application.Sheets.Count Then
        'Columns containing comments (eg: row 3)
        For Each xCell In Worksheets(1).Range("3:3")
            If xCell.Text <> "" Then
                Range(xCell.Address).ClearComments
                If Not xCell.Comment Is Nothing Then
                    Range(xCell.Address).AddComment xCell.Comment.Text
                End If
            Else
                'Stop on empty cell
                GoTo Workbook_SheetActivate_End
            End If
        Next
    End If

Workbook_SheetActivate_End:
    If xSheetProtected = True Then
        Sh.Protect Password:=xPassword
    End If
    Exit Sub

Invalid_Sheet_Password:
    MsgBox "Password provided for """ & Sh.Name & """ sheet does not match!", vbExclamation, "Invalid Password"
    Exit Sub
    
End Sub

If you got this far, I assume you can follow VBA code. That said, the code should be self-explanatory with my code comments are naming conventions 😉

How to Whitelist Emails & Domains in Outlook.com (MSN, Hotmail, Live, etc)

You ever go looking for an email only to find it in your Junk Mail folder? Here are a few ways to whitelist senders and/or domains avoid the issue.

Individual Messages

This method effectively whitelists the sender of a single message and moves it to your “Inbox” folder.

  1. Open your Junk Mail folder
  2. Right-click the message
  3. Choose “Mark as not junk”

TIP: You can also “Block” senders from the same menu 👍

Manually Whitelist Emails and Domains

If you expect to trust all emails from a particular domain (accountants, banks, etc) you can whitelist their entire domain. This way, regardless of who is sending, any email from their domain will be treated as “Not Junk” and be delivered to your “Inbox” folder

  1. Click the “Gear” icon (top-right of window)
  2. Click “View all Outlook settings”
  3. Click “Mail”
  4. Click “Junk email”
  5. Click “+ Add” under “Safe senders and domains”
  6. Enter the email address or domain
    • You can enter email@domain.com to add a sender, or domain.com to whitelist all senders from that domain.
  7. Hit the “Enter” key

TIP: Never whitelist free email domains such gmail.com, yahoo.com, msn.com, etc. You can whitelist individual senders, but most (if not all) free email services are used to send high-volume spam, so whitelisting the entire domain is a bad idea 🙅‍♂️

 

Know When Visitors Arrive Using LiveZilla Windows App

One of the things that kinda bugged me about the LiveZilla Windows App was the inability to know what’s going on without being in the actual app. Simply put, there are no visual or audible notifications except for chat requests.

Today I finally decided to figure out a better way to monitor my web traffic… Events! Continue reading Know When Visitors Arrive Using LiveZilla Windows App

Add Pattern Support for HTML5 Input Type Number with jQuery

Ran into an issue earlier today that I could not figure out and ended up asking my second question on StackOverflow in seven years.

I was trying to use <input type="number" pattern="[0-9]{8}"> to enforce 8-digit numbers while allowing leading zeros. This was being done on an optional field (no required attribute) and I could not understand why it was bypassing my pattern on the populated field (eg: value “1234” was accepted, pattern ignored).

Peter B. over at SO (kudos) pointed me to the MDN reference that provided the reason… number input does not support pattern attribute

By design! While their reasoning makes sense from a general perspective, the min/max attribute workaround does not help where leading zeros are acceptable (eg: min="00000001"is the same as min="1" for obvious reasons). Unfortunately I need all 8-digits for my purposes. I also tried using minlength and maxlength attributes as a hail-mary to no avail.

Here is a jQuery shim I wrote for my main script file thereby adding pattern support the <input type="number"> Continue reading Add Pattern Support for HTML5 Input Type Number with jQuery

How to Continue Using Buttons with “data-loading-text” in Bootstrap 4 with jQuery

While converting a Bootstrap 3 template design for use with Bootstrap 4, I noticed they removed stateful buttons (eg: “loading” and “reset” button states) from BS4! Granted it was mentioned in BS3, but I never noticed the deprecated warning 🙁

The deprecated code for showing a button’s loading state was $('#selector').button('loading') and to return the button to its original state you would use  $('#selector').button('reset') . Continue reading How to Continue Using Buttons with “data-loading-text” in Bootstrap 4 with jQuery

Add Mouse Wheel Support to Bootstrap Carousel with jQuery

I was adding mouse wheel events to a ul element with the CSS rule overflow:hidden to emulate mouse wheel scrolling when no scrollbar was present.

The links in the unordered list also trigger a Bootstrap 4.1 Modal that contains a Bootstrap Carousel. So I decided to add the same functionality to my modal carousel gallery. Continue reading Add Mouse Wheel Support to Bootstrap Carousel with jQuery