jQuery 验证只工作一次问题

Question

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>

Answer 1

我认为你应该像这样在你的条件中将你的双符号（&&）更改为双管道（||）：

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

Answer 2

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>