简体   繁体   中英

Bootstrap modal validation

I have a login modal which lets user (by href ) activate another modal adduser. The validation works fine for login modal but not for adduser modal.

Here's how I am calling the modals,

 <a data-toggle="modal" href="" data-target="#login">Login</a>

<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="login" aria-hidden="true">

<div class="modal fade" id="adduser" tabindex="-1" role="dialog" aria-labelledby="adduer" aria-hidden="true">

function AddUser()
{ 
    $('#login').modal('hide'); 
    $('#adduser').modal('show'); 
}

function BackToLogin()
{
    $('#adduser').modal('hide');
    $('#login').modal('show');
}

Validation code for login

$(document).ready(function() { 
    $('#login-form').validate({ 
        rules: { 
            email: { 
                required: true, 
                email: true 
            }, 
            agree: "required"
        }, 
        highlight: function(element) { 
            $(element).closest('.control-group').removeClass('success').‌addClass('error');
        },
        success: function(element) { 
            element.text('OK!').addClass('valid').closest('.control-group').removeClass('error').addClass('su‌​ccess'); 
        }
    }); 
});

Validation code for adduser

$(document).ready(function() { 
    $('#adduser-form').validate({ 
        rules: { 
            email: { 
                required: true, 
                email: true 
            }, 
            agree: "required"
        }, 
        highlight: function(element) { 
            $(element).closest('.control-group').removeClass('success').‌addClass('error');
        },
        success: function(element) { 
            element.text('OK!').addClass('valid').closest('.control-group').removeClass('error').addClass('su‌​ccess'); 
        }
    }); 
});

You have a typo on your adduser line. You have: <div class="modal fade" id="adduser" tabindex="-1" role="dialog" aria-labelledby="adduer" aria-hidden="true">

Which should probably be: <div class="modal fade" id="adduser" tabindex="-1" role="dialog" aria-labelledby="adduser" aria-hidden="true">

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM