JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<div class="price-filter wrapper">
            <form action="/" name="form">
                <label>Цена от:</label>
                <input class="price-from validating" name="price_from" type="text" placeholder="0">
                <label>до:</label>
                <input class="price-to validating" name="price_to" type="text" placeholder="10000">
                <input class="refresh" type="submit" value="Обновить">
                <div class="error-messages"></div>
            </form>
        </div>

CSS

.wrapper {
    width: 50%;
    margin: 0 auto;
}

.price-filter {
    text-align: center;
    margin-bottom: 10px;
    height: auto;
}
    form {
        width: 100%;
    }

    .price-filter input {
        border: 1px solid #000000;
        outline: none;
    }
    
.error-messages {
     color: red;
     margin-top: 5px;
}

input.error {
    border: 2px solid red;
}

JavaScript

$('form').validate({
             errorElement: "div",

             errorPlacement: function(error, element) {
             
             console.log(error);
             
                 $('.error-messages').append(error);
             },

             submitHandler: function() {
              this.successList.map(function(field){
                  console.log($(field).attr("name"), $(field).val())
              })
    console.log("Таблица успешно обновлена!")
}
        });

        $('.validating').rules('add', {
            rules: {
                number: true,
                minlength: 3,
            },
            messages: {
                number: "Введите цифры"
            },
        });