CODEWITHSUNDEEP
javascriptjqueryvalidation
user9966589
user9966589

Reputation:

jQuery validation working just once problem

I have a problem with validation

My validation script is working just once and after that, it doesn't work.

$(document).ready(function() {
  function validateCurrency($currency) {
    var currencyFormat = /^[0-9]{1,3}(,[0-9]{3})*\.[0-9]+$/;
    return currencyFormat.test($currency);
  }

  $(document).on("change", "#price_meter", function() {
    if ($("#price_meter").val() === '' && !validateCurrency($("#price_meter").val())) {
      $("#price_meterError").html('لطفا قیمت متری ملک را به تومان وارد کنید.');
    } else {
      $("#price_meterError").html('');
    }
  });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<label for="price_meter">قیمت متری:</label>
<input type="text" placeholder="قیمت متری ملک" class="form-control divide" name="price_meter" id="price_meter">
<div id="price_meterError" class="text-danger mt-1 validate-error"></div>

Upvotes: 2

Views: 78

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You need to use OR operator || instead of AND && in your condition.

So your test will say if the current value is empty or is not match the pattern show the message else clear the message.

$(document).on("input", "#price_meter", function() {
    if ( $(this).val() === '' || !validateCurrency( $(this).val()) ) {
    __________________________^^
        $("#price_meterError").html('لطفا قیمت متری ملک را به تومان وارد کنید.');
    } else {
        $("#price_meterError").html('');
    }
});

NOTE 1: You could get the current value using this keyword like $(this).val().

NOTE 2: I suggest the use of input event instead of change since it's more efficient when tracking the user inputs.

$(document).ready(function() {
  function validateCurrency($currency) {
    var currencyFormat = /^[0-9]{1,3}(,[0-9]{3})*\.[0-9]+$/;
    return currencyFormat.test($currency);
  }

  $(document).on("input", "#price_meter", function() {
    if ($(this).val() === '' || !validateCurrency($(this).val())) {
      $("#price_meterError").html('لطفا قیمت متری ملک را به تومان وارد کنید.');
    } else {
      $("#price_meterError").html('');
    }
  });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<label for="price_meter">قیمت متری:</label>
<input type="text" placeholder="قیمت متری ملک" class="form-control divide" name="price_meter" id="price_meter">
<div id="price_meterError" class="text-danger mt-1 validate-error"></div>

Upvotes: 0

HelgeFox
HelgeFox

Reputation: 349

I think you should change your double ampersands (&&) to double pipes (||) in your conditional like this:

if ($("#price_meter").val() === '' || !validateCurrency($("#price_meter").val())){

Upvotes: 1

Related Questions