CODEWITHSUNDEEP
javascripthtmljquery
N00BenCuarentena
N00BenCuarentena

Reputation: 23

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

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!

Upvotes: 0

Views: 97

Answers (2)

tarkh
tarkh

Reputation: 2559

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>

Upvotes: 0

Always Helping
Always Helping

Reputation: 14570

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>

Upvotes: 1

Related Questions