验证输入字段的值是否大于另一个

Question

最大值必须大于最小值。它工作正常但是当我输入'12345'作为最大值时，即使最小值较小，它也会显示图像中显示的错误。

 if (max < min) {
        chkFeeValues = false;

        if (chkFeeValues) {
            $('.errorMaxFee').html('');
        } else {
            $('.errorMaxFee').html(html);
        }

        $(document).ready(function() {
                    var isValOk = false;
                    var isPerOk = false;
                    //Value
        $(document).on("change", "#MinValue", function() {
            if (parseInt($("#MinValue").val()) > parseInt($("#MaxValue").val())) {
               $("#MaxValueError").text("Max Value should be greter than or equals to Min Value");
               isValOk = false;
            } 
else {
            $("#MaxValueError").text("");
            isValOk = true;
          }
       });

Answer 1

您只是在监听#MinValue输入字段所做的更改，因此在更改#MaxValue输入字段时，您永远不会触发它。

将处理程序更改为$(document).on('change', '#MinValue, #MaxValue', function() {});，以便在更改任一输入字段后立即重新验证。

Answer 2

问题是您只在更改最小值时才检查有效性。您还必须检查何时更改最大值。所以以这种方式重构代码：

    function checkValues() {
        if (parseInt($("#MinValue").val()) > parseInt($("#MaxValue").val())) {
            $("#MaxValueError").text("Max Value should be greter than or equals to Min Value");
            isValOk = false;
        }
        else {
            $("#MaxValueError").text("");
            isValOk = true;
        }
    }

$('#MinValue').on('change', checkValues);
$('#MaxValue').on('change', checkValues);

Answer 3

我认为你需要这样的东西：

＆＃13;

＆＃13;

function FormCtrl($) {
  var self = this;
  var MIN_VALUE = 1000;
  
  self.minValueAccepted = MIN_VALUE;
  self.min = $('#ValA');
  self.field = $('#ValB');
  
  self.formFeedback = function(message, success) {
    var type = success ? 'info' : 'danger';
    
    console.log(message, success)
    
    return $('#formFeedback').html('<p class="text-'+ type +'">' + message + '</p>');
  };
  self.updateField = function(event) {
    var value = Number(self.field.val());
    var isValid = false;
    var message = 'Try Again';


    if(value > self.minValueAccepted) {
      isValid = true;
      message = 'You Are Hired';
    }
    
    return self.formFeedback(message, isValid);
  };
  
  self.updateMinValue = function(event) {
    self.minValueAccepted = Number(self.min.val());
  };  

  this.min.change(self.updateMinValue);
  this.field.change(self.updateField);
  
  this.min.val(MIN_VALUE);
}

jQuery(document).ready(FormCtrl);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

<section class="container">
  <div class="row">
  
  <form id="sampleForm">
    <div class="col-xs-6">
      <label for="valA">Value A</label>
      <input class="form-control" type="number" id="ValA"/>
    </div>
    <div class="col-xs-6">
      <label for="valB">Value B</label>
      <input class="form-control" type="number" id="ValB"/>
    </div>
    <div class="row">
      <div class="col-xs-12" >
        <div id="formFeedback" style="padding: 1em; text-align:center;"></div>
      </div>
    </div>
  </form>
  
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;