CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Victor Aurélio
Victor Aurélio

Reputation: 2565

Input mask with plain value

What's the best way to create a input mask that keeps the original value (i.e. not masked one) in the input ?

For example:

let's use the mask 99999-999, and the number 58398000.

What I want is the number to be displayed as:

58398-000 and input's really value to be 58398000.

I need this because the validation counts the number of digits and check if there's only digits.

And also the mask should appear when the page load with input's value setted.

Tried this one: http://www.jasny.net/bootstrap/javascript/#inputmask

The jasny's plugin has 2 issues:

P.S: Using bootstrap and jQuery

Upvotes: 0

Views: 1203

Answers (1)

Yann Chabot
Yann Chabot

Reputation: 4879

You should do a validation before you submit using jQuery and make sure the field value is formatted as you'd like. Or you could add a value to your input that would be data-real-value or something like that, and you could format this onKeyUp or keyDown in the field.

You could either use 

$('#yourSubmitButton').on('click', function(e){
    e.prevenDefault();
    //Your validation
    if (//Form is valid){
       $('form').submit();
    }
});

Required documentation:

jQuery keyup -> https://api.jquery.com/keyup/

jQuery keydown -> https://api.jquery.com/keydown/

jQuery submit -> https://api.jquery.com/submit/

N.B: Do not forget to do your back-end validation also to make sure that people surely used your form before you use the received data in your database or anything.

Upvotes: 1

Related Questions