Cool, Nice one. Glad you got it working the way you want it.
Mine is practically identical to yours, but the input code is in the form in the body area of the page.
You should also have the widget script line near the bottom of your page looking a bit like:
var Appointment_request_group_Phone = new Spry.Widget.ValidationTextField("Appointment_request_group_Phone", "phone_number", {format:"phone_custom", validateOn:["blur"], pattern:"00000-000000", useCharacterMasking:true});
Everything about this is a never-ending learning curve for me, - just when I think I'm getting somewhere, everything goes pear-shaped.
Cheers