CODEWITHSUNDEEP
jqueryjquery-uijquery-pluginsjquery-selectors
meer
meer

Reputation: 225

Jquery input mask plugin for decimal number

Hei !

i have check input masks on this link http://digitalbush.com/projects/masked-input-plugin/ but i want something onblur when user leave textbox then it validate whether the format is 999,99 if user has not typed 999,99 then it display message to correct it. otherwise not .can anyone give a hint

Upvotes: 0

Views: 5580

Answers (2)

Marco Johannesen
Marco Johannesen

Reputation: 13134

@Stuvie got something :)

http://jsfiddle.net/g8KSg/8/

$('input').focusout(function(e){
    var error = false;
    var regex = /^\d+,\d{2,2}$/;

    if(!($('#checkval').val().match(regex))) {   
        error = true;
    }

    if(error == true) {
            $('#result').html("<em>ERROR</em> Input must be deciaml format '99,00'");
        } else {
            $('#result').html("");
        }

});

Upvotes: 1

Stuart Wakefield
Stuart Wakefield

Reputation: 6414

Using jQuery on its own you can achieve what you want using regular expressions. It may not be as nice to work with but regular expressions can be pretty powerful...

// either create a hidden error message in the HTML 
// or create an error message element here...
var numberMaskError = $(".number-mask-error");
var numberMaskInput = $(".number-mask");

function validateNumberMask() {
   // using a regular expression to determine validity
   // matches a pattern with one or more digits 0-9 followed by a comma
   // followed by exactly two more digits 0-9
   if(numberMaskInput.val().search(/^\d+,\d{2,2}$/) !== -1) {
     // hide or remove the error
     numberMaskError.hide();
   } else {
     // show or append the error
     numberMaskError.show();
   }
}

numberMaskInput.bind("change", function() {
  // validate the field when the value has been changed on blur
  validateNumberMask();
}).bind("keyup", function() {
  // revalidate if the error is currently showing and user is changing the value
  if(err.is(":visible")) {
    validateNumberMask();
  }
});

I hope this helps

Upvotes: 1

Related Questions