Obramowanie inputa przy wysłaniu formularza w zalezności od wartości w polach textowych

Mam taki problem mam sobie formularz wysyłany ajaxem i zawiera on pola textowe dokładnie 20 tych pól i do bazy ma się zapisać pod warunkiem, że każde z tych pół będzie mniejsze od poprzedniego i po stronie PHP to działa, ale teraz chciałbym dodać taki efekt gdzie po wpisaniu w dane pole okreslonej wartości będzie dane pole podkreslało w zalesności czy dana wartośc będzie mniejsza bądź większa od poprzedniego.

<form method="get" id='formlevelMoodSubmit'>
        <table class="table">
            <tr>
                <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
                   Wartośc nastroju od do przy której czujesz myśli samobójcze i totalną depresję
                </td>
                <td>
                    <input type="text" name="valueMood-10From" class="form-control" value="{{$arrayLevel[0]["from"]}}" disabled>
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood-10To" class="form-control" value="{{$arrayLevel[0]["to"]}}" disabled>
                </td>

            </tr>
            <tr>
                <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
                    Wartośc nastroju od do przy której czujesz myśli samobójcze i totalną depresję, ale trochę mniejsze
                </td>
                <td>
                    <input type="text" name="valueMood-9From" class="form-control" value="{{$arrayLevel[1]["from"]}}" onkeyup="loadValue('valueMood-10To','valueMood-9From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood-9To" class="form-control" value="{{$arrayLevel[1]["to"]}}" disabled>
                </td>

            </tr>
            <tr>
                <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
                    Wartośc nastroju od do przy której czujesz myśli rezygnacyjne i totalną depresję
                </td>
                <td>
                    <input type="text" name="valueMood-8From" class="form-control" value="{{$arrayLevel[2]["from"]}}" onkeyup="loadValue('valueMood-9To','valueMood-8From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood-8To" class="form-control" value="{{$arrayLevel[2]["to"]}}" disabled>
                </td>

            </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
                  Wartośc nastroju od do przy której czujesz myśli rezygnacyjne i totalną depresję, ale trochę mniejsze
                </td>
                <td>
                    <input type="text" name="valueMood-7From" class="form-control" value="{{$arrayLevel[3]["from"]}}"  onkeyup="loadValue('valueMood-8To','valueMood-7From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood-7To" class="form-control" value="{{$arrayLevel[3]["to"]}}" disabled>
                </td>

                        </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
                  Wartośc nastroju od do przy której czujesz myśli rezygnacyjne i totalną depresję
                </td>
                <td>
                    <input type="text" name="valueMood-6From" class="form-control" value="{{$arrayLevel[4]["from"]}}"  onkeyup="loadValue('valueMood-7To','valueMood-6From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood-6To" class="form-control" value="{{$arrayLevel[4]["to"]}}" disabled>
                </td>

                        </tr>

                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
                   Wartośc nastroju od do przy której czujesz myśli rezygnacyjne i umiarkowną depresję
                </td>
                <td>
                    <input type="text" name="valueMood-5From" class="form-control" value="{{$arrayLevel[5]["from"]}}"  onkeyup="loadValue('valueMood-6To','valueMood-5From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood-5To" class="form-control" value="{{$arrayLevel[5]["to"]}}" disabled>
                </td>

            </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
                 Wartośc nastroju od do przy której czujesz myśli lekką depresję
                </td>
                <td>
                    <input type="text" name="valueMood-4From" class="form-control" value="{{$arrayLevel[6]["from"]}}"  onkeyup="loadValue('valueMood-5To','valueMood-4From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood-4To" class="form-control" value="{{$arrayLevel[6]["to"]}}" disabled>
                </td>

            </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
             Wartośc nastroju od do przy której czujesz lekkie obniżenie nastroju
                </td>
                <td>
                    <input type="text" name="valueMood-3From" class="form-control" value="{{$arrayLevel[7]["from"]}}"  onkeyup="loadValue('valueMood-4To','valueMood-3From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood-3To" class="form-control" value="{{$arrayLevel[7]["to"]}}" disabled>
                </td>

            </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
             Wartośc nastroju od do przy której czujesz myśli chandre
                </td>
                <td>
                    <input type="text" name="valueMood-2From" class="form-control" value="{{$arrayLevel[8]["from"]}}"  onkeyup="loadValue('valueMood-3To','valueMood-2From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood-2To" class="form-control" value="{{$arrayLevel[8]["to"]}}" disabled>
                </td>

            </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
  Wartośc nastroju od do przy której czujesz myśli lzejszą handrę
                </td>
                <td>
                    <input type="text" name="valueMood-1From" class="form-control" value="{{$arrayLevel[9]["from"]}}"  onkeyup="loadValue('valueMood-2To','valueMood-1From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood-1To" class="form-control" value="{{$arrayLevel[9]["to"]}}" disabled>
                </td>

            </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
            Wartośc nastroju od do przy której czujesz się normalnie
                </td>
                <td>
                    <input type="text" name="valueMood0From" class="form-control" value="{{$arrayLevel[10]["from"]}}"  onkeyup="loadValue('valueMood-1To','valueMood0From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood0To" class="form-control" value="{{$arrayLevel[10]["to"]}}" disabled>
                </td>

            </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
              Wartośc nastroju od do przy której czujesz się trochę lepiej
                </td>
                <td>
                    <input type="text" name="valueMood1From" class="form-control" value="{{$arrayLevel[11]["from"]}}"  onkeyup="loadValue('valueMood0To','valueMood1From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood1To" class="form-control" value="{{$arrayLevel[11]["to"]}}" disabled>
                </td>

            </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
            Wartośc nastroju od do przy której czujesz, że masz nastrój lekko podwyższony
                </td>
                <td>
                    <input type="text" name="valueMood2From" class="form-control" value="{{$arrayLevel[12]["from"]}}"  onkeyup="loadValue('valueMood1To','valueMood2From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood2To" class="form-control" value="{{$arrayLevel[12]["to"]}}" disabled>
                </td>

            </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
           Wartośc nastroju od do przy której czujesz, że masz nastrój jeszcze bardziej podwyższony
                </td>
                <td>
                    <input type="text" name="valueMood3From" class="form-control" value="{{$arrayLevel[13]["from"]}}"  onkeyup="loadValue('valueMood2To','valueMood3From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood3To" class="form-control" value="{{$arrayLevel[13]["to"]}}" disabled>
                </td>

            </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
       Wartośc nastroju od do przy której czujesz, że masz lekką hipomanię
                </td>
                <td>
                    <input type="text" name="valueMood4From" class="form-control" value="{{$arrayLevel[14]["from"]}}"  onkeyup="loadValue('valueMood3To','valueMood4From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood4To" class="form-control" value="{{$arrayLevel[14]["to"]}}" disabled>
                </td>

            </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
           Wartośc nastroju od do przy której czujesz, że masz hipomanię
                </td>
                <td>
                    <input type="text" name="valueMood5From" class="form-control" value="{{$arrayLevel[15]["from"]}}"  onkeyup="loadValue('valueMood4To','valueMood5From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood5To" class="form-control" value="{{$arrayLevel[15]["to"]}}" disabled>
                </td>

            </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
       Wartośc nastroju od do przy której czujesz, że masz większą hipomanię
                </td>
                <td>
                    <input type="text" name="valueMood6From" class="form-control" value="{{$arrayLevel[16]["from"]}}"  onkeyup="loadValue('valueMood5To','valueMood6From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood6To" class="form-control" value="{{$arrayLevel[16]["to"]}}" disabled>
                </td>

            </tr>
                        <tr>
                            <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
    Wartośc nastroju od do przy której czujesz, że masz lekką manię
                </td>
                <td>
                    <input type="text" name="valueMood7From" class="form-control" value="{{$arrayLevel[17]["from"]}}"  onkeyup="loadValue('valueMood6To','valueMood7From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood7To" class="form-control" value="{{$arrayLevel[17]["to"]}}" disabled>
                </td>

            </tr>
                                    <tr>
                                        <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
       Wartośc nastroju od do przy której czujesz, że masz manię
                </td>
                <td>
                    <input type="text" name="valueMood8From" class="form-control" value="{{$arrayLevel[18]["from"]}}"  onkeyup="loadValue('valueMood7To','valueMood8From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood8To" class="form-control" value="{{$arrayLevel[18]["to"]}}" disabled>
                </td>

            </tr>
                                    <tr>
                                        <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
      Wartośc nastroju od do przy której czujesz, że masz silniejszą manię
                </td>
                <td>
                    <input type="text" name="valueMood9From" class="form-control" value="{{$arrayLevel[19]["from"]}}"  onkeyup="loadValue('valueMood8To','valueMood9From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood9To" class="form-control" value="{{$arrayLevel[19]["to"]}}" disabled>
                </td>

            </tr>
                                    <tr>
                                        <td style='width: 5px;'>
                    {{$i++}}
                </td>
                <td class="tdColorMood">
       Wartośc nastroju od do przy której czujesz, że masz bardzo silną manię	

                </td>
                <td >
                    <input type="text" name="valueMood10From" class="form-control " value="{{$arrayLevel[20]["from"]}}"  onkeyup="loadValue('valueMood9To','valueMood10From',{{$i-12}})">
                </td>
                <td class="tdColorMood">
                    Do
                </td>
                <td>
                    <input type="text" name="valueMood10To" class="form-control" value="{{$arrayLevel[20]["to"]}}" disabled>
                </td>

            </tr>
            <tr>
                <td colspan="5"  class="center">
                    <input type="button" class="btn-mood main mood" onclick="levelMoodSubmit()" value='EDYTUJ'>
                </td>
            </tr>
            <tr>
                <td colspan="5" class='center'>
                    <div id='levelMoodSubmit' class=' center ajaxMessage'>

                    </div>
                </td>
            </tr>
        </table>
    </form>

Tak to wygląda widzimy jest za to odpowiedzialna funkcja loadValue i ona robi dwie rzeczy nas interesuje ta druga rzecz.

function checkError(i) {

    if ($("input[name='valueMood" + i + "From']").val() >= $("input[name='valueMood" + (i-1) + "From']").val()  ) {
       
        $("input[name='valueMood" + i + "From']").addClass("errorForm");
        if (i != -9) {
         $("input[name='valueMood" + (i+1) + "From']").addClass("errorForm");
        }
    }
    else {

        $("input[name='valueMood" + i + "From']").removeClass("errorForm");
        $("input[name='valueMood" + (i+1) + "From']").removeClass("errorForm");
    }
    
    if ($("input[name='valueMood" + i + "From']").val() <= $("input[name='valueMood" + (i+1) + "From']").val() ) {
        $("input[name='valueMood" + i + "From']").addClass("errorForm");
        $("input[name='valueMood" + (i-1) + "From']").addClass("errorForm");
    }
    else {

        $("input[name='valueMood" + i + "From']").removeClass("errorForm");
        $("input[name='valueMood" + (i-1) + "From']").removeClass("errorForm");
    }

    
}

function loadValue(valueInputsave,valueInputread,i) {
    checkError(i);
    $("input[name='" +valueInputsave +  "']").val($("input[name='" +valueInputread +  "']").val());
    
}

Czyli nas interesuje funkcja checkError() i teraz dodam, że zaznaczanie na kolor czerowny działa dobrze czyli dodawanie klast errorForm jest dobrze, natomiast jak w polu gdzie była zła wartość wpisuje dobrą wartośc to nie usuwa klasy errorForm ( i to się nie dziej zawsze ).

NIe przeglądalem całego kodu, ale jeśli chcesz sprawdzić długość pobranego tekstu to powinieneś zapisać to za pomocą właściwości length.

const firstInput = $('input.first');
const secondInput = $('input.second');

if (firstInput.val().length > secondInput.val().length) {
  // tekst z pierwszego pola jest większy niż drugi
}

czyli jak masz swoją funkcję checkErrors

function checkError(i) {
  // tutaj według mnie trzeba dopisać x2 length
  if ($("input[name='valueMood" + i + "From']").val().length >= $("input[name='valueMood" + (i-1) + "From']").val().length) { 
     // ...
  }
  else {
     // ...
  }

  // tutaj też trzeba dopisać x2 length
  if ($("input[name='valueMood" + i + "From']").val().length <= $("input[name='valueMood" + (i+1) + "From']").val().length) {
    // ...
  }
  else {
    // ...
  }
}

Ja niechę sprawdzić długości trekstu tylko czy dana wartośc zmiennje jest mniejsza bądź większa.

Wartość mniejsza lub większa, czyli chcesz porównać 2 liczby, które pobierasz z inputów?

Okej, bo metoda val z jQuery zwraca wartość, ale w postaci tekstowej, czyli jak wpiszesz sobie w inpucie 15 to zwróci Ci to jako tekst "15" i żeby to później że sobą porównać, musisz najpierw zamienić to na liczbę.

Do zamiany tekst --> liczba istnieją funkcje parseInt/Number dla liczb całkowitych i parseFloat dla liczb zmiennoprzecinkowych .

Poprawiając mój przykład z pierwszego posta to byłoby coś takiego

const firstInputNumber = parseInt($('input.first').val(), 10);
const secondInputNumber = parseInt($('input.second').val(), 10);

if (firstInputNumber > secondInputNumber) {
  // liczba z pierwszego pola jest większa
}

Xarviel napisał(a):

Wartość mniejsza lub większa, czyli chcesz porównać 2 liczby, które pobierasz z inputów?

Okej, bo metoda val z jQuery zwraca wartość, ale w postaci tekstowej, czyli jak wpiszesz sobie w inpucie 15 to zwróci Ci to jako tekst "15" i żeby to później że sobą porównać, musisz najpierw zamienić to na liczbę.

Do zamiany tekst --> liczba istnieją funkcje parseInt/Number dla liczb całkowitych i parseFloat dla liczb zmiennoprzecinkowych .

Poprawiając mój przykład z pierwszego posta to byłoby coś takiego

const firstInputNumber = parseInt($('input.first').val(), 10);
const secondInputNumber = parseInt($('input.second').val(), 10);

if (firstInputNumber > secondInputNumber) {
  // liczba z pierwszego pola jest większa
}

Ale to i tak nie przez to bo jak ma w pierwszą stronę pokolorowac inputa to dobrze porównuje dopiero jak ma odznaczyć.

w SPACJA końcu mi się udało coś było przy warunkach logicznych źle .
Przerobiłem funkcje z js i teraz działa.

function checkError(i) {

    if (i == 10) {
        if ((parseFloat($("input[name='valueMood" + i + "From']").val()) >= 20 ) || (parseFloat($("input[name='valueMood" + i + "From']").val())  <= parseFloat($("input[name='valueMood" + (i-1) + "From']").val()) )  ) {
            $("input[name='valueMood" + i + "From']").addClass("errorForm");
        }
        else {
            $("input[name='valueMood" + i + "From']").removeClass("errorForm");
        }
        return;
    }
    
        if ((parseFloat($("input[name='valueMood" + i + "From']").val())  > parseFloat($("input[name='valueMood" + (i-1) + "From']").val()) )  && ( parseFloat($("input[name='valueMood" + i + "From']").val()) < parseFloat($("input[name='valueMood" + (i+1) + "From']").val()) )) {
            $("input[name='valueMood" + i + "From']").removeClass("errorForm");
        }
        else {
            $("input[name='valueMood" + i + "From']").addClass("errorForm");
        }

    
}