PostSparrow

Jquery Code

<input type="text" name="phone" id="phone" placeholder="Enter Phone" >
<script>
	$(document).ready(function () {
    const phoneRegex = /^\(\d{3}\) \d{3}-\d{4}$/;

    $('#phone').on('input', function () {
        const value = $(this).val();
        
        // Remove all non-digit characters
        const cleaned = value.replace(/\D/g, '');
        
        // Restrict length to 10 digits
        const limited = cleaned.substring(0, 10);

        // Format the value as (999) 999-9999
        let formatted = '';
        if (limited.length > 0) formatted = `(${limited.substring(0, 3)}`;
        if (limited.length > 3) formatted += `) ${limited.substring(3, 6)}`;
        if (limited.length > 6) formatted += `-${limited.substring(6, 10)}`;

        $(this).val(formatted);

        // Validate input
        if (phoneRegex.test(formatted)) {
            $('#phone-error').text('Valid phone number').removeClass('error').addClass('valid');
        } else {
            $('#phone-error').text('Invalid phone number').removeClass('valid').addClass('error');
        }
    });
});



</script>