Поле формы HTML - Как требовать формат ввода

Здесь я хочу, чтобы номера телефонов были введены в мою HTML-форму как (XXX) XXX-XXXX, а номера SS были введены как XXX-XX-XXXX. Это оно.

Единственная причина, по которой я это делаю, заключается в том, что результаты отправки формы согласованы и легко экспортируются в Excel.

Мне сказали использовать Javascript для этого, но, возможно, я недостаточно продвинут, чтобы понять все шаги в этом направлении.

Может кто-то, пожалуйста, указать мне правильное направление, помня, что я новичок?

Вау, спасибо большое, Итан и @ suman-bogati! Я почти там сейчас! Поле теперь выскакивает ошибка, указывающая на использование правильного формата 555-55-5555. Замечательно. Но независимо от того, что я ввожу, введите в это поле всплывающее окно сохраняется. Я пробовал 555-55-5555, а также 555555555, и ни один из них не принят. Вот HTML-код для этого поля:

<label>
            Social Security Number:
            <input id="ssn" required pattern="^d{3}-d{2}-d{4}$"
                title="Expected pattern is ###-##-####" />
        </label>
</div>
    <script>$('form').on('submit', function(){
        $(this).find('input[name="SocialSecurity"]').each(function(){
        $(this).val() = $(this).val().replace(/-/g, '');
    });
    $(this).find('input[name="ssn"]').each(function(){
        $(this).val() = $(this).val().replace(/-/g, '');
    });
});</script>
    <br />

Ответы на вопрос(4)

Ваш ответ на вопрос