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

Question

The maximum value must be greater than the minimum value. It's working fine but when I put in '12345' as the maximum value then even if the minimum value is less, it shows the error shown in the image.

---

 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

You're only listening to changes made on the #MinValue input field so you'll never get it to trigger when changing the #MaxValue input field.

Change your handler to $(document).on('change', '#MinValue, #MaxValue', function() {}); in order to revalidate as soon as you change either input fields.

Answer 2

The problem is that you're checking for validity only when you change the min value. You have to check when you change the max also. So refactor the code this way:

    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

I think that you need something like that:

 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); 

 <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>