0

I am new to jquery. I have a form with two input boxes. In that i am implemented some validations.

<form>
<div class="col-md-6">
<div class="form-group ">
  <label for="minAmt" class="col-lg-4 control-label">Min.Amount</label>
  <div class="col-lg-6">
    <input type="text" class="form-control minAmt" id="minAmt" name="minAmt" placeholder="Enter Min Amount" />
  </div>
</div>
  <div class="form-group ">
  <label for="maxAmt" class="col-lg-4 control-label">Max.Amount</label>
  <div class="col-lg-6">
    <input type="text" class="form-control maxAmt" id="maxAmt" name="maxAmt" placeholder="Enter Max Amount" />
  </div>
</div>
</div>
<div class="col-md-12">
<div class="form-actions btnzone">
   <button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="addbutton" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button>
</div>
</div>
</form>

Script code here:

$('#minAmt,#maxAmt').keyup(function(){
    // if($(this).val() == '0'){
      //$(this).val('');  
    //}
     var val = this.value;
      var re = /^([0-9]+[\.]?[0-9]?[0-9]?|[0-9]+)$/g;
      var re1 = /^([0-9]+[\.]?[0-9]?[0-9]?|[0-9]+)/g;
      if (re.test(val)) {
        //do something here

      } else {
        val = re1.exec(val);
        if (val) {
          this.value = val[0];
        } else {
          this.value = "";
        }
      }
   });

Here i am allowing first value 0 and decimal value allowing up to two points only.

But here some cases wrong input's taking. For Example i enter 0500 or 0000555 etc.. it allowing starting with 0,that's why previously i restricted 0 doesn't allow first character but it is effected to decimal values starts with 0 (0.01 or 0.98) are not allowing.

My requirement is money related. So i want change to 0000555 to 555.

How to modify my code?

Durga
  • 545
  • 7
  • 21
  • 39
  • you are not able to click `.` in your number input field. so how 0.10 will came? – Alive to die - Anant May 05 '17 at 10:55
  • why use both `$(this).val()` and the (correct) `this.value` ? – Alnitak May 05 '17 at 10:56
  • @Alnitak neither are any more "correct" than the other. One is just the jQuery wrapper. – Jamiec May 05 '17 at 10:57
  • @Alive to Die: i am able to click `.` please check carefully – Durga May 05 '17 at 10:58
  • Your question is *really* unclear. Both your regular expressions match `0.` - it's not clear what you're trying to achieve. Try explaining that. – Jamiec May 05 '17 at 11:01
  • Do you really need the block: `if($(this).val() == '0') { $(this).val(''); }` It seems like it would cause problems in a `keyup` scenario for what you are trying to do. – gmiley May 05 '17 at 11:01
  • @Jamiec one involves several function calls (including the ones internal to jQuery). The other requires a trivial property lookup. – Alnitak May 05 '17 at 11:06
  • @Alnitak that doesnt make one "correct" - it might make one "faster" or "more efficient" – Jamiec May 05 '17 at 12:13
  • @Jamiec perhaps, but I regard use of things like `$(this).attr('id')` instead of `this.id` a pretty bad jQuery code smell – Alnitak May 05 '17 at 12:48

3 Answers3

1

Here's one way to solve your problem:

$('#minAmt,#maxAmt').keyup(function(){
  // if($(this).val() == '0'){
    //$(this).val('');  
  //}
  var val = this.value;
  // <new code>
  if(val.length > 1 
     && val.indexOf('0') === 0 
     && val.indexOf('.') === -1){
   this.value = this.value.substring(1);
  }
  // </new code>
  var re = /^([0-9]+[\.]?[0-9]?[0-9]?|[0-9]+)$/g;
  var re1 = /^([0-9]+[\.]?[0-9]?[0-9]?|[0-9]+)/g;
  if (re.test(val)) {
    //do something here

  } else {
    val = re1.exec(val);
    if (val) {
      this.value = val[0];
    } else {
      this.value = "";
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-md-6">
<div class="form-group ">
  <label for="minAmt" class="col-lg-4 control-label">Min.Amount</label>
  <div class="col-lg-6">
    <input type="text" class="form-control minAmt" id="minAmt" name="minAmt" placeholder="Enter Min Amount" />
  </div>
</div>
  <div class="form-group ">
  <label for="maxAmt" class="col-lg-4 control-label">Max.Amount</label>
  <div class="col-lg-6">
    <input type="text" class="form-control maxAmt" id="maxAmt" name="maxAmt" placeholder="Enter Max Amount" />
  </div>
</div>
</div>
<div class="col-md-12">
<div class="form-actions btnzone">
   <button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="addbutton" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button>
</div>
</div>
</form>

It doesn't use a fancy regex but it works.

P.S. You should also validate the inputs server-side, 'cause people can get around javascript. I'm saying it just in case, maybe you already do it.

nonzaprej
  • 1,322
  • 2
  • 21
  • 30
0

try input type='number' with step

<input type="number" step="0.01" class="form-control"  />
Dhaval Pankhaniya
  • 1,996
  • 1
  • 15
  • 26
  • @Durga: Be careful because if you change your input type to "number" your code in the "keyup" event won't work properly in android (I dunno about iOS). Check out This question: http://stackoverflow.com/questions/43761396/minus-sign-and-dot-clear-input-type-number-field-with-replace/43761516#43761516 – nonzaprej May 05 '17 at 11:06
0

just used

<input type="number" step="0.01" class="form-control minAmt" id="minAmt" name="minAmt" placeholder="Enter Min Amount" />

and validation will be automatically

But if you need uses regexp, you can use this construction for validation float type like 0.01 or 0,01:

var template = /^([-+]?[0-9]*[\.|,]?[0-9]*)$/g
val = template.test(val) ? parseFloat(val, 2) : 0; // after this row val any way will be some float positive or negative or 0, but we can operate it like number

Second row transform any string like number to number without leads 0. For example:

var a = '003';
b = parseFloat(a, 2);
// result 3

So your code will be like this:

$('#minAmt,#maxAmt').keyup(function(){
    var template = /^([-+]?[0-9]*[\.|,]?[0-9]*)$/g
    this.value = template.test(this.value) ? parseFloat(this.value.replace(',', '.'), 2) : 0; //after your field will have the number without leads 0
   });
Vitalii Andrusishyn
  • 3,984
  • 1
  • 25
  • 31