Javascript jQuery,如果所有输入都不是空的,则将类添加到按钮

Javascript jQuery,如果所有输入都不是空的,则将类添加到按钮,javascript,jquery,Javascript,Jquery,我不是javascript的高手,我很难禁用表单,除非我的所有输入字段都不是空的 我还将添加其他内容,比如确保电子邮件是电子邮件,密码至少为8等等,但现在我只想让它工作,如果所有的输入不是空的,并且条款和条件复选框被选中 这是我的代码: $('.m-name').keyup(function(){monthlyButtonActive();}); $('.m-email').keyup(function(){monthlyButtonActive();}); $('.m-password').k

我不是javascript的高手,我很难禁用表单,除非我的所有输入字段都不是空的

我还将添加其他内容,比如确保电子邮件是电子邮件,密码至少为8等等,但现在我只想让它工作,如果所有的输入不是空的,并且条款和条件复选框被选中

这是我的代码:

$('.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');
    }
因此,如果所有字段都不是空的,我会在“.active button”的按钮上添加一个类,但如果不是空的,我想获取它的类。但我也不想这样

有人能帮我吗


谢谢

您遇到了问题,因为如果字段为空,则将complete=0。你不应该做任何事。如果不为空,则引发complete变量,否则complete保持不变

$('.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');
    }

您是否尝试过删除以前的类,然后添加新类?或者考虑将和Id添加到按钮元素中?如果complete为5,则执行此操作,否则执行相同操作,这有点敏感,尽管它发生在键盘上,所以如果我在名称中键入5个字母,则complete已在5,然后在单击复选框后将为9检查更新的答案。那将解决那个问题。为什么我的答案没有用。我查过了。
$('.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');
    }