jQuery maskedinput and form reset

Question

I'm using the Masked Input plugin for jQuery by Josh Bush (Masked Input) on a typical address input form on the ZipCode and Phone Number fields.

When I display a record in the form and set the inputmask on the fields in question, the form initially displays the formatted zip (99999-9999) and Phone number (999)999-9999.

When I issue a form reset however, the inputmask formatting disappears and I'm left with the raw field values 999999999 and 9999999999 for zip and phone.

The fields do get formatted properly when they receive focus but I want them formatted properly immediately after reset.

Any idea how to get this to work with a generic solution without cycling focus through all fields on the form?

I've considered adding a "data-inputmask" attribute to the appropriate fields and calling a generic function that uses the attribute to establish the inputmask upon form load, but this example is a simplification of the code I'm actually maintaining and visiting every use of inputmask in the project is not feasible.

Here's a simplified version of the form and the script:

<form action="/User/UpdateAddress" id="AddEditAddress" method="post" novalidate="novalidate">
    <input id="AddressId" name="AddressId" type="hidden" value="A5A715C7-C5DD-4793-A3D8-CE101F83224B" />
    <label for="FirstName" title="First Name">First Name</label>
    <input id="FirstName" name="FirstName" type="text" value="John" />
    <label for="LastName" title="Last Name">Last Name</label>
    <input id="LastName" name="LastName" type="text" value="Doe" />
    <label for="Address1" title="Address 1">Address 1</label>
    <input id="Address1" name="Address1" type="text" value="123 Main St" />
    <label for="Address2" title="Address 2">Address 2</label>
    <input id="Address2" name="Address2" type="text" value="Apartment 123" />
    <label for="City" title="City">City</label>
    <input id="City" name="City" type="text" value="Anytown" />
    <label for="State" title="State">State</label>
    <input id="State" name="State" type="text" value="PA" />
    <label for="ZipCode" title="Zip Code">Zip Code</label>
    <input id="ZipCode" name="ZipCode" type="text" value="191234567" />
    <label for="Phone" title="Phone">Phone</label>
    <input id="Phone" name="Phone" type="text" value="2155551234" />        
</form>
<button id="FormReset">Reset</button>
<button id="FormSubmit">Submit</button>
<script type="text/javascript">
    $("input#ZipCode").inputmask("99999-9999");
    $("input#Phone").inputmask("(999)999-9999");
    $("button#FormReset").on("click", function(){
        $("form#AddEditAddress")[0].reset();
    });
    $("button#FormSubmit").on("click", function(){
        $("form#AddEditAddress")[0].submit();
    });
</script>

Note: I'm using the jQuery extension method "inputmask" instead of the "mask" method as it exists in the library because there was a name conflict with another library. It's the same method renamed. — Lee Greco, Oct 01 '12 at 20:25

score 0 · Answer 1 · answered Oct 01 '12 at 20:11

0

Why don't you try reassigning the inputmask as soon as you click the reset button..

$("button#FormReset").on("click", function(){
        $("form#AddEditAddress")[0].reset();
        $("input#ZipCode").unmask().inputmask("99999-9999");
        $("input#Phone").unmask().inputmask("(999)999-9999");
});

answered Oct 01 '12 at 20:11

Sushanth --

55,259
9
66
105

Something like this may work if I know the fields that have the input mask applied beforehand., I'm really looking for a way to do it by passing a form: function($form){$form[0].reset(); }; – Lee Greco Oct 01 '12 at 20:27

jQuery maskedinput and form reset

1 Answers1