wlaczony/wylaczony buttton

Witam

Mam taki kod w jquery . Podpowiedzcie prosze w jaki sposob zrealizowac uzaleznienie wlaczenia/wylaczenia przycisku w zaleznosci od uzupelnionych wszystkich pol w formularzu ?

$(document).ready(function(){

$('#fname').on('blur', function() {

	var input = $(this);
	var name_length = input.val().length;
           
	if(name_length >= 5 && name_length <= 15){
		input.removeClass("invalid").addClass("valid");
		input.next('.komunikat').text("Wprowadzono poprawną nazwę.").removeClass("blad").addClass("ok");
            }        
	else{
	         input.removeClass("valid").addClass("invalid");
		input.next('.komunikat').text("Nazwa musi mieć więcej niż 4 i mniej niż 16 znaków!").removeClass("ok").addClass("blad");
		
	}

});

$('#phone').on('blur', function() {
var input = $(this);
var name_length = input.val().length;

	if(name_length == 9){
		input.removeClass("invalid").addClass("valid");
		input.next('.komunikat').text("Wprowadzono poprawny numer telefonu.").removeClass("blad").addClass("ok");
	}
	else{
	         input.removeClass("valid").addClass("invalid");
		input.next('.komunikat').text("Telefon musi miec 9 cyfr").removeClass("ok").addClass("blad");
		
	}

});

$('#model').on('blur', function() {
var input = $(this);
var name_length = input.val().length;

	if(name_length >= 3){
		input.removeClass("invalid").addClass("valid");
		input.next('.komunikat').text("Wprowadzono poprawna nazwę modelu.").removeClass("blad").addClass("ok");
	}
	else{
	         input.removeClass("valid").addClass("invalid");
		input.next('.komunikat').text("Model nie może miec mniej niż 3 znaki").removeClass("ok").addClass("blad");
		
	}

});

$('#message').on('blur', function() {
var input = $(this);
var name_length = input.val().length;

	if(name_length >= 15){
		input.removeClass("invalid").addClass("valid");
		input.next('.komunikat').text("Wpisano wiadomość.").removeClass("blad").addClass("ok");
	}
	else{
	         input.removeClass("valid").addClass("invalid");
		input.next('.komunikat').text("Wiadomość nie może mieć mniej niż 15 znakow ").removeClass("ok").addClass("blad");
		
	}

});

Witam

Chodzilo oczywiscie ze mam formularz i chcialem uzaleznic wlaczenie/wylaczenie przycisku od uzupelnionych danych w polach formularza

Kilka zdań tak na szybko (nie patrzyłem na twój kod, napiszę tylko ogólną ideę, jak ja bym to zrobił).

Tworzysz kilka zmiennych typu boolean - po jednej dla każdego pola, które chcesz sprawdzać.

Początkowo każdą z nich ustawiasz na false, a stan przycisku na disabled.

Do każdego pola dodajesz zdarzenie sprawdzające, czy w efekcie edycji znajduje się w tym polu jakaś treść (czyli inaczej mówiąc - czy pole jest niepuste). W wypadku szczególnych pól możesz dokonać dodatkowego sprawdzenia - np. czy mail ma w środku małpę, część przed nią oraz poprawną domenę za małpą, a w polu numerycznym czy nie znajdują się inne znaki, niż cyfry.

Po każdym sprawdzeniu ustawiasz wartość zmiennej odpowiadającej danemu polu zgodnie z tym, co ustaliłeś w poprzednim kroku. A na końcu robisz coś w stylu przycisk_enabled = pole1_poprawne & pole2_poprawne & pole3... . Jeśli tych pól jest stosunkowo niewiele, możesz zrobić tak, jak napisałem przed chwilą - po osobnej zmiennej dla każdego pola. Jeśli jednakże będzie to bardziej skomplikowany formularz, możesz zamiast kilkunastu/kilkudziesięciu zmiennych, wrzucić to w jakąś tablicę, a następnie podczas ustalania stanu przycisku przelecieć ją pętlą foreach i wynik podstawić jako stan przycisku.

Ważne jest też, żeby sprawdzenia dokonywać po każdej edycji pola formularza, a nie tylko po pierwszej. Bo może być tak, że ktoś wypełni wszystkie pola, w związku z czym przycisk się odblokuje. Jeśli na tym etapie się zatrzymamy, a użytkownik później wyczyści zawartość jakiegoś pola - musimy to także wykryć i w odpowiedzi zablokować guziczek.

No i uzyj zamiast blura, on keyup

$().on('keyup', function() {});

W ten sposob uzytkownik nie bedzie skonfundowany, ze wypelnil wszystkie pola (ale jeszcze nie wyszedl z ktoregos) a dalej nie moze uzyc przycisku

W zasadzie jesli juz masz te klasy valid to mozesz sprawdzic ile takich elementow jest w kontenerze i na tej zasadzie w keyupie wlaczac/wylaczac przycisk + jak juz uzywasz tej klasy to dodaj jakiegos zielonego ptaszka obok inputa, ze pole jest prawidlowo wypelnione
Przyklad uzycia na tej stronie:

$('.col-vote').length
>>>4

selektor oczywiscie moze byc bardziej dokladny:

$('#post-1494597 .col-vote').length
>>>1

PS: masz mnostwo powtarzajacego sie kodu, wyciagnij to do jakiejs funkcji
PS2: HTML5 moze dokonac walidacji za Ciebie:

    <form action="/">
        <input type="text" minlength="5" required>
        <input type="text" minlength="5" required>
        <input type="email" minlength="3" required>
        <input type="submit">
    </form>

A nawet mozesz tak:

        input:invalid { 
            border: 1px solid red;
        }
        input:valid {
            border: 1px solid lime;
        }

Ale na backendzie i tak waliduj ponownie bo nigdy nie wiadomo co moze w requescie przyjsc

Dzięki Cerrato , twój post był pomocny , zastosowałem się do twoich wskazówek i teraz skrypt działa prawidłowo , próbuje też wdrożyc rady od stivensa .
Dzięki Panowie

Pozdrawiam
Kowal Jan