jQuery, Klasse hinzufügen Button, wenn alle Eingaben nicht leer sind

Question

Ich bin nicht das beste bei Javascript, und ich habe Probleme, mein Formular deaktiviert, es sei denn, alle meine Eingabefelder sind nicht leer.

Und ich werde andere Dinge hinzufügen, wie zum Beispiel dafür sorgen, dass die E-Mail eine E-Mail ist und das Passwort mindestens 8 usw. ist, aber jetzt möchte ich nur funktionieren, wenn alle Eingaben nicht leer sind und die Begriffe und Das Kontrollkästchen Bedingungen ist aktiviert.

Dies ist mein Code:

$('.m-name').keyup(function(){monthlyButtonActive();}); 
$('.m-email').keyup(function(){monthlyButtonActive();}); 
$('.m-password').keyup(function(){monthlyButtonActive();}); 
$('.m-password-confirm').keyup(function(){monthlyButtonActive();}); 
$('.m-terms').change(function(){monthlyButtonActive();}); 

function monthlyButtonActive() 
{ 
    var complete = 0; 
    if($('.m-name').val().length > 2){ 
     complete++; 
    }else{ 
     complete = 0 
    } 
    if($('.m-email').val().length > 2){ 
     complete++; 
    }else{ 
     complete = 0 
    } 
    if($('.m-password').val().length > 2){ 
     complete++; 
    }else{ 
     complete = 0 
    } 
    if($('.m-password-confirm').val().length > 2){ 
     complete++; 
    }else{ 
     complete = 0 
    } 
    if($('.m-terms').is(':checked')){ 
     complete++; 
    }else{ 
     complete = 0 
    } 
    if(complete == 5){ 
     console.log(complete); 
     console.log('its now complete'); 
     $('.monthly-button').children('.orange-button').addClass('active-button'); 
    }else{ 
     $('.monthly-button').children('.orange-button').addClass('active-button'); 
    } 

Also, wenn alle Felder nicht leer sind, i eine Klasse auf die Schaltfläche ‚.active-Taste‘ hinzufügen, aber wenn ich nicht die Klasse, es nehmen möchten . Aber es funktioniert nicht, wie ich es auch will.

Kann mir bitte jemand helfen?

Dank

Answer 1

$('.m-name').keyup(function(){monthlyButtonActive();}); 
$('.m-email').keyup(function(){monthlyButtonActive();}); 
$('.m-password').keyup(function(){monthlyButtonActive();}); 
$('.m-password-confirm').keyup(function(){monthlyButtonActive();}); 
$('.m-terms').change(function(){monthlyButtonActive();}); 

function monthlyButtonActive() 
{ 
    var complete = 1; 
    if($('.m-name').val().length<=2){   
     complete = 0 
    } 
    else if($('.m-email').val().length <=2){   
     complete = 0 
    } 
    else if($('.m-password').val().length<=2){   
     complete = 0 
    } 
    else if($('.m-password-confirm').val().length <=2){   
     complete = 0 
    } 
    else if($('.m-terms').is(':checked')==false){    
     complete = 0 
    } 
    if(complete == 1){ 
     console.log(complete); 
     console.log('its now complete'); 
     $('.monthly-button').children('.orange-button').removeClass('deactive-button').addClass('active-button'); 
    }else{ 
     $('.monthly-button').children('.orange-button').removeClass('active-button').addClass('deactive-button'); 
    } 

Answer 2

Sie haben Probleme, da Sie komplett = 0 machen, wenn das Feld leer ist. Du solltest nichts tun. Wenn es nicht leer ist, hebst du die komplette Variable auf, sonst bleibt das Ganze gleich.

$('.m-name').keyup(function(){monthlyButtonActive();}); 
$('.m-email').keyup(function(){monthlyButtonActive();}); 
$('.m-password').keyup(function(){monthlyButtonActive();}); 
$('.m-password-confirm').keyup(function(){monthlyButtonActive();}); 
$('.m-terms').change(function(){monthlyButtonActive();}); 

function monthlyButtonActive() 
{ 
    var m_name=0,m_email=0,m_password=0,m_password_confirm=0,m_terms=0; 
    if($('.m-name').val().length > 2){ 
     m_name=1; 
    } 
    if($('.m-email').val().length > 2){ 
     m_email=1; 
    } 
    if($('.m-password').val().length > 2){ 
     m_password=1; 
    } 
    if($('.m-password-confirm').val().length > 2){ 
     m_password_confirm=1; 
    } 
    if($('.m-terms').is(':checked')){ 
     m_terms=1; 
    } 
    if(m_name==1&&m_email==1&&,m_password==1&&m_password_confirm==1&&m_terms==1){ 
     console.log(complete); 
     console.log('its now complete'); 
     $('.monthly-button').children('.orange-button').addClass('active-button'); 
    }else{ 
     console.log(complete); 
     console.log('its not complete'); 
    }