live validation input when min>max in jquery

Question

I want validate input "min" and "max" and give an error. My actual code work when I press submit button. I want validate this in live when the user complements other fields. When the user go to the next field and max

My actual code:

<!doctype html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>...</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>
<div class="error">

</div>
<form id="a" action="b.php" method="post" enctype="multipart/form-data">
    <label>
        <input type="number" name="yearMin" value="1900" min="1800" max="2299">
    </label>
    <label>
        <input type="number" name="yearMax" value="2015" min="1800" max="2299">
    </label>
    <label>
        <input type="text">
    </label>

    <button type="submit" class="button">Start</button>
</form>


<script>
    $(document).ready(
        function () {
            $("form#a").submit(
                function () {
                    var min =$('input[name^="yearMin"]').val();
                    var max =$('input[name^="yearMax"]').val();
                    if (min<max)
                    {
                        return true;
                    }
                    else
                    {
                        $('.error').text("min>max");
                        return false;
                    }

                }
            );
        }
    );

</script>


</body>
</html>

Edit:

<script>

    $("input[type=number]").on('keydown keyup',function(e) {
        var min = $('input[name^="yearMin"]').val();
        var max = $('input[name^="yearMax"]').val();
        if (min < max) {
            $('.error').text('');
            return true;
        } else {
            $('.error').text("min>max");
            return false;
        }
    });

</script>

Do I think right? text('') doesn't work.

Rino Raj · Accepted Answer · 2016-02-13 11:50:44Z

3

$("input[type=number]").on('keydown keyup',function(e) {
  var min = $('input[name^="yearMin"]').val();
  var max = $('input[name^="yearMax"]').val();
  if (min < max) {
    return true;
  } else {
    $('.error').text("min>max");
    return false;
  }
});

The keyup event occurs when a keyboard key is released. The keydown event occurs when a keyboard key is pushed. So we will bind this event to the required element.

edited Feb 13, 2016 at 11:50

answered Feb 13, 2016 at 11:45

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vjdj Over a year ago

thanks for answer. I have one more question. When the user correct value and min<max ho to do that div will again be empty. I try "$('.error').empty();" but doesn't work.

vjdj Over a year ago

I edit my first post. $('.error').text(''); doesn't work I think it was wrong to understand and I said not at this point

Collectives™ on Stack Overflow

live validation input when min>max in jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related