jQuery 表單驗證：空值欄位自動滾動至錯誤位置

需求

表單提交時檢查必填欄位，若有空值則阻止提交，並平滑滾動至**第一個**錯誤欄位位置。

完整實作

<form id="myForm">
    <input type="text" name="username" required />
    <input type="email" name="email" required />
    <textarea name="message" required></textarea>
    <button type="submit">送出</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
    $('#myForm').on('submit', function(e) {
        e.preventDefault(); // 先阻止預設提交
        
        // 找第一個驗證失敗的欄位
        var $invalid = $(this).find(':input[required]').filter(function() {
            return $.trim(this.value) === '';
        }).first();
        
        if ($invalid.length) {
            // 平滑滾動至該欄位
            $('html, body').animate({
                scrollTop: $invalid.offset().top - 50  // 留 50px 間距
            }, 400, function() {
                $invalid.focus(); // 聚焦方便輸入
            });
            // 可選：顯示錯誤提示
            $invalid.addClass('error').one('input', function() {
                $(this).removeClass('error');
            });
        } else {
            // 全部通過 → 真正提交
            this.submit(); // 原生 submit 繞過 jQuery handler
        }
    });
});
</script>

關鍵點解析

1. e.preventDefault() 攔截提交，掌握控制權。
2. :input[required] 選擇所有標記 required 的輸入元素（input/select/textarea）。
3. .filter() 過濾空值，.first() 取第一個。
4. animate({scrollTop: ...}) 實現平滑滾動，offset().top 取得絕對座標。
5. 驗證通過後用 this.submit()（原生 DOM 方法）繞過 jQuery 事件避免無限迴圈。

進階：支援自定義驗證規則

var validators = {
    'email': v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v),
    'phone': v => /^09\d{8}$/.test(v)
};

var $invalid = $(this).find('[data-rule]').filter(function() {
    var rule = $(this).data('rule');
    return validators[rule] && !validators[rule]($.trim(this.value));
}).first();

原生 JS 替代方案（無 jQuery 依賴）

form.addEventListener('submit', e => {
    e.preventDefault();
    const invalid = [...form.querySelectorAll('[required]')].find(el => !el.value.trim());
    if (invalid) {
        invalid.scrollIntoView({behavior: 'smooth', block: 'center'});
        invalid.focus();
    } else {
        form.submit();
    }
});

總結

核心模式：**攔截 submit → 找第一個無效欄位 → scrollTop animate → focus → 通過則原生 submit**。jQuery 與原生 JS 皆可輕鬆實現。