Неисправность при заполнении данных в input

Question

Есть у меня такой вот скрипт, дело в том что когда без заполнении данных нажимаю на Send подчеркиваются все 3 input-а (так и должно быть), но когда я ввожу внутри одного из троих input-ов у меня должно этот же input стать серым (как было вначале), но такого не происходит, происходит только тогда когда я ввожу второй input, плюс к этому когда input-и стали серыми (две input-и после ввода), когда нажимается send все 3 элемента становятся красными вместо одного (в которого не вводили ничего), есть ли какой ни будь способ исправить это кроме присвоении отдельных классов и отдельных функции?

css и html добавил всего лишь для вида, ошибка в jQuery

input{
  outline:none;
  border:1px solid #EDEDED;
}
.send{
    width:155px;
    height:23px;
    background-color:#5089FC;
    display: flex;
    justify-content: center;
    align-items: center;
    color:white;
    border-radius:20px;
    margin-top: 15px;
    font-size: 13px;
    margin-bottom: 85px;
    border:1px solid white;
}
.msg{
    position: fixed;
    z-index: 15;
    left:0;
    top:0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.5);
    width:100%;
    height:100%;
}
.msg-sec{
    width:60%;
    height:30%;
    background-color: white;
    position: relative;
    box-shadow: 0px 0px 15px 0px #BABABA;
    display: flex;
    justify-content: center;
    align-items: center;
}
.msg-sec>p{
    color:#5089FC;
}
.msg-sec>i{
    position: absolute;
    font-size: 30px;
    right: -10px;
    top:-10px;
    color:red;
}


<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<input type = "text" placeholder="" class = "input-adress input">
<input type="text" name="" placeholder = "+7" class = "input-numb input">
<input type="mail" name="" class = "input">

<div class = "msg">
        <div class = "msg-sec">
            <p>Данные отправлены</p>
            <i class="fa fa-times-circle close-end"></i>
        </div>
    </div>

<div class = "send">Send</div>




$(".send").click(function(){
    if($(".input").val() == ""){
        $(".input").css("border", "red solid 1px");
    }
    else if($(".input").val() !== ""){
        $('.alert').css('display','flex');
        $(".input").val('')
        $(".preview").attr("src","");
    }
})

$(".close-end").click(function(){
    $('.alert').css('display','none');
})



document.querySelectorAll(".input").forEach(el => el.oninput = noneRed);




function noneRed(){
    if($(".input").val() !== ""){
        $(".input").css("border", "#EDEDED solid 1px");
    }
}

Answer 1

При выполнении функции nonred Вы всё равно проверяете только первое значение.
Вам необходимо выполнять данное действия для каждого элемента input, а не только первого.
Так же в пример добавил использование localstorage. Чтобы по 100 раз не приходилось вводить данные. При желании можете закомментировать просто вызов этой функции.

    $(".send").click(function () {
        $(".input").each(function (key,inp) { // Выполняем для каждого поля input
            localStorage.setItem(key, $(inp).val()); // Сохраняем значение в localstorage
            if ($(inp).val() == "") { // Проверяем заполнено ли.
                $(inp).css("border", "red solid 1px"); // inp
            } else if ($(inp).val() !== "") {
                $('.alert').css('display', 'flex');
                $(inp).val('');
                $(".preview").attr("src", "");
            }
        });
        setVal(); // вызываем функцию.
    });

    $(".close-end").click(function () {
        $('.alert').css('display', 'none');
    });

    document.querySelectorAll(".input").forEach(el => el.oninput = function () { // вводим функию, где работаем с переменной el (ранее не передавалась в функцию Вашу)
        if($(el).val()!==''){
            $(el).css("border", "#EDEDED solid 1px");
        }
    });

    function setVal() {
        $(".input").each(function (key1, inp1) {
            let tempval = localStorage.getItem(key1); // Берём значение из localstorage по ключу
            if (tempval) { // если есть, то...
                inp1.value = tempval; // Проставляем значение
            }
        });
    }

    input{
    outline:none;
    border:1px solid #EDEDED;
}
.send{
    width:155px;
    height:23px;
    background-color:#5089FC;
    display: flex;
    justify-content: center;
    align-items: center;
    color:white;
    border-radius:20px;
    margin-top: 15px;
    font-size: 13px;
    margin-bottom: 85px;
    border:1px solid white;
}
.msg{
    position: fixed;
    z-index: 15;
    left:0;
    top:0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.5);
    width:100%;
    height:100%;
}
.msg-sec{
    width:60%;
    height:30%;
    background-color: white;
    position: relative;
    box-shadow: 0px 0px 15px 0px #BABABA;
    display: flex;
    justify-content: center;
    align-items: center;
}
.msg-sec>p{
    color:#5089FC;
}
.msg-sec>i{
    position: absolute;
    font-size: 30px;
    right: -10px;
    top:-10px;
    color:red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<input type = "text" placeholder="" class = "input-adress input">
<input type="text" name="" placeholder = "+7" class = "input-numb input">
<input type="mail" name="" class = "input">

<div class = "msg">
        <div class = "msg-sec">
            <p>Данные отправлены</p>
            <i class="fa fa-times-circle close-end"></i>
        </div>
    </div>

<div class = "send">Send</div>

БЛОГ НА HUSL

Неисправность при заполнении данных в input

Ответы (1 шт):