Bootstrap 模态验证

Posted 2023-05-08

【中文标题】Bootstrap 模态验证

【英文标题】：Bootstrap modal validation

【发布时间】：2017-06-17 10:31:21

【问题描述】：

我有一个登录模式，它允许用户（通过 href ）激活另一个模式 adduser。验证适用于登录模式，但不适用于 adduser 模式。

我是这样称呼模态的，

 <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');

登录验证码

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

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'); 
        
    ); 
);

【参考方案1】：

您的 adduser 行有错字。 你有： <div class="modal fade" id="adduser" tabindex="-1" role="dialog" aria-labelledby="adduer" aria-hidden="true">

这应该是： <div class="modal fade" id="adduser" tabindex="-1" role="dialog" aria-labelledby="adduser" aria-hidden="true">

【讨论】：

对不起，问题没有解决。我确信在使用另一个模式之前我必须禁用第一个活动模式（内存？），但我不知道如何。类似于 $("#login').validate().resetForm(); 或删除

我不完全确定我理解你的问题。用户登录后，adduser div 显示，您想让服务器验证添加的用户吗？这就是你最初的帖子让我相信的。您是否让用户使用一个表单登录，然后隐藏该表单并显示您添加用户的新表单？

嗨，对不起我的英语不好。我的想法是用户可以通过登录来启动模态加法器。如果用户发送空，验证将返回特定于每个字段的消息。目前，如果我运行登录并尝试发送一个空表单，我会收到验证错误。但是如果我通过登录运行 adduser，验证根本不会做任何事情。

您有可以添加到原始帖子中的登录和添加用户验证码吗？

唯一不同的是 id_fome，这里是 login.js 验证器 $(document).ready(function() $('#login-form').validate( rules: email: 必需：true，电子邮件：true ，同意：“必需”，突出显示：function(element) $(element).closest('.control-group').removeClass('success').addClass('error' ); , 成功：function(element) element .text('OK!').addClass('valid') .closest('.control-group').removeClass('error').addClass('success' ); ); );