How to validate number in inputs with javascript when pressing button?

Question

Right now I have an Input Field (number) that shows a message when the numbers are over 120 or below 135.

//Message on Age
$("#age").keyup(function() {
      if ($('#age').val() < 35 || $('#age').val() > 120) {
        $('#errorMsg').show();
      } else {
        $('#errorMsg').hide();
      }

<!-- AGE -->
<div class="card-2 p-20 hidden">

  <div class="bg-white max-width p-20 mb-20">
    <h2 style="margin-bottom: 50px;">What is your age?</h2>

    <div class="options">

      <input id="age" name="age" type="number" step="1" min="35" max="120" required="true" class="form-custom">
      <span id="errorMsg" style="display:none;">Only policyholders between 35 and 120 years are elegible</span>

    </div>

  </div>

  <div>
    <button type="button" class="btn-previous">
                        Previous
                    </button>
    <button type="button" class="btn-next">
                        Next
                    </button>
  </div>

</div>

The issue is that user's still can press the button with the error message on the screen, I want to show the error message when they hit the button or invalidate the button if the age field isn't in range.

Thank you so much to anyone who can help on this!

Set the disabled property of the button.

Barmar
– Barmar

2020-08-28 01:29:13 +00:00
Commented Aug 28, 2020 at 1:29 — Barmar
– Barmar, Commented Aug 28, 2020 at 1:29
Cast $('#age').val() like +$('#age').val()

StackSlave
– StackSlave

2020-08-28 01:36:40 +00:00
Commented Aug 28, 2020 at 1:36 — StackSlave
– StackSlave, Commented Aug 28, 2020 at 1:36

Always Helping · Accepted Answer · 2020-08-28 01:36:01Z

You can use .prop function to disable your button if the condition matches and enable it if its all good.

Also, you can use $(this) to get the value of your input instead using if using #age id again in your .val().

In addtion you need to add + to your val() to make sure that strings value which are sting initially are converted into integers when checking the if condition.

Live Demo:

$("#age").on('input keyup', function() {
  let btn = $('.btn-next')
  let errorMsg = $('#errorMsg')
  if (+$(this).val() < 35 || +$(this).val() > 120) {
    errorMsg.show();
    btn.prop('disabled', true)
  } else {
    errorMsg.hide();
    btn.prop('disabled', false)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-2 p-20 hidden">

  <div class="bg-white max-width p-20 mb-20">
    <h2 style="margin-bottom: 50px;">What is your age?</h2>

    <div class="options">

      <input id="age" name="age" type="number" step="1" min="35" max="120" required="true" class="form-custom">
      <span id="errorMsg" style="display:none;">Only policyholders between 35 and 120 years are elegible</span>

    </div>
  </div>
  <div>
    <button type="button" class="btn-previous">
      Previous
    </button>
    <button type="button" class="btn-next">
      Next
    </button>
  </div>

</div>

tarkh · Accepted Answer · 2020-08-28 02:00:37Z

You can change keyup to change jQuery method and implement sort of controller like this

// Controller
let cont = true;

// Validator
$("#age").on('change', function() {
  if ($('#age').val() < 35 || $('#age').val() > 120) {
    $('#errorMsg').show();
    cont = true;
  } else {
    $('#errorMsg').hide();
    cont = false;
  }
});

$(".btn-next").on('click', function(event) {
  if(cont) {
    // Here do some warning you want
    $('#errorMsg').show(function() {
      alert($('#errorMsg').text());
    });
    
    // ALSO if this button gonna be SUBMIT
    // button, you can set here prevent
    // default mode like this:
    //
    //event.preventDefault();
  } else {
    // Validation ok, continue your logic
    // ...
    //
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- AGE -->
<div class="card-2 p-20 hidden">
  <div class="bg-white max-width p-20 mb-20">
    <h2 style="margin-bottom: 50px;">What is your age?</h2>
    <div class="options">
      <input id="age" name="age" type="number" step="1" min="35" max="120" required="true" class="form-custom">
      <span id="errorMsg" style="display:none;">Only policyholders between 35 and 120 years are elegible</span>
    </div>
  </div>
  <div>
    <button type="button" class="btn-previous">Previous</button>
    <button type="button" class="btn-next">Next</button>
  </div>
</div>

@BijuKalanjoor If you look at the code more carefully you'll see that true means it controlling input, false means no control - you can go.. Draft verb logic, sorry)

Collectives™ on Stack Overflow

How to validate number in inputs with javascript when pressing button?

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related