模态需要在验证后进行验证，它应该移动到另一个模态

Posted

技术标签:

【中文标题】模态需要在验证后进行验证，它应该移动到另一个模态【英文标题】：Modal need to be validated after validation it should move to another modal 【发布时间】：2018-05-09 01:32:14 【问题描述】：

在这段代码中，我需要在验证后验证模态，它应该移动到另一个模态 在 jquery 中，我在成功验证后验证了数据目标已添加到 jquery 代码中，但它无法正常工作

fiddle link 获取详细视图

输入值后，jquery 部分出现问题，因为电子邮件和文本框已经过验证

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<button class="main" data-toggle="modal" data-target="#myModalnew" data-dismiss="modal">Check</button>
<div class="modal_main">
<div class="modal fade" id="myModalnew" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>

<h2 class="modal-title">Heading</h2>
<h4>Details</h4>
</div>
<div class="modal-body border">
<form id="contact" method="POST">
<fieldset>
<div class="input-group email">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input id="email" type="email" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group name">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="name" type="text" class="form-control" placeholder="Name">
</div>
<div class="tab-content">
<div id="criteria_ship" class="tab-pane fade in active">
<div class="input-group address">
<span class="input-group-addon"><i class="glyphicon glyphicon-map-marker"></i></span>
<input id="address" type="text" class="form-control" placeholder="Street">
</div>
<div class="input-group town">  
<input type="text" class="form-control" id="city" placeholder="City">
<input type="text" class="form-control" id="postcode" placeholder="Postcode">
</div>
<div class="paybutton">
<input type="submit" class="but_key but_link" id="pay"  value="Payment" data-toggle="modal" data-target="#" data-dismiss=""
>
</div>
</div>  
</div>  
</fieldset>
</form>         
</div>
</div>
</div>
</div>  
<div class="modal fade" id="myModalnew1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<a href="#myModalnew" id="previous" data-toggle="modal" data-dismiss="modal"> < </a>
<h2 class="modal-title">getsmartnet.com</h2>
<h4>Smartnet's Payment</h4>
</div>
<div class="modal-body">
<form>
<fieldset>
<div class="main_card">
<div class="input-group card">
<span class="input-group-addon"><i class="glyphicon glyphicon-credit-card"></i></span>
<input id="card" type="text" class="form-control" placeholder="Card Number">
</div>
<div>
<div class="input-group date">  
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input type="text" class="form-control" id="expiry" placeholder="MM/YY">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="text" class="form-control" id="code" placeholder="CVC">
</div>
</div>
<div class="input-group check_rem">
<input type="checkbox" id="rem_check"> Remember Me
</div>
<fieldset id="main_rem">
<div class="input-group forgot"id="check_mobile">
<div class="input-group">
<span>For security, please enter your <strong><span>mobile phone number</span></strong>
</span>
</div>
<div class="input-group mob_rem">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input type="tel" class="form-control" id="mob_num">
</div>
</div>
</fieldset>
<fieldset>
<div class="but_link">
<a href="#" class="but_key">Pay</a>
</div>
</fieldset>
</div>  
</fieldset>
</form>
</div>
</div>  
</div>  
</div>  
</div>
<script>
         $(document).ready(function()
            var name = $( "#name" ),

            password = $( "#password" ),
            street=$("#street"),
            city=$("#city"),
            pin=$("#postcode");
            $('#pay').click(function(e) 
                var isValid = true;
                $('input[type="text"]').each(function() 
                    if ($.trim($(this).val()) == '') 
                        isValid = false;
                        $(this).css(
                            "border": "1px solid red"
                        );
                        isValid = false;
                    
                    else 
                        $(this).css(
                            "border": "",
                            "background": ""
                        );
                        isValid = true;
                    
                );

                var email = $( "#email" ).val();
                var check_em=false;
                if ($.trim(email).length == 0) 
                    $("#email").css(
                        "border": "1px solid red"
                    );
                    check_em=false;
                    e.preventDefault();
                   
                else if (validateEmail(email)) 
                    $("#email").css(
                            "border": "",
                            "background": ""
                        );
                    check_em=true;
                
                else 
                    $("#email").css(
                        "border": "1px solid red"
                    );
                    check_em=false;
                    e.preventDefault();
                

                if(check_em==true && isValid==true)    
                    alert("final");
                    $(this).attr('data-dismiss',"modal");
                    $(this).attr('data-target',"#myModalnew1"); 
                
            );
        );
        function validateEmail(email) 
            var filter = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-z]2,4$/;
            var res_tes=filter.test(email)
            console.log(res_tes);
            if (res_tes==true) 
                return true;
            
            else 
                return false;
            
        
</script>
</body>
</html>

【问题讨论】：

jsfiddle.net/guru3105/poahuomo 【参考方案1】：

即使在验证成功后，您的 isValid 仍保留为 false，因此 if(check_em==true &amp;&amp; isValid==true) 这绝不是真的，并且从未触发下一个模式。

我在这里解决了这些问题，现在它可以工作了

$(document).ready(function() 
    var name = $("#name"),
        password = $("#password"),
        street = $("#street"),
        city = $("#city"),
        pin = $("#postcode");
    $('#pay').click(function(e) 
        //prevent form submission to server
        e.preventDefault();
        //set it to false initially
        var isValid = false;
        $('input[type="text"]').each(function() 
            if ($.trim($(this).val()) === '') 
                $(this).css(
                    "border": "1px solid red"
                );
             else 
                $(this).css(
                    "border": "",
                    "background": ""
                );
                // set it to true, only if it's valid
                isValid = true;
            
        );

        var email = $("#email").val();
        var check_em = false;
        if ($.trim(email).length === 0) 
            $("#email").css(
                "border": "1px solid red"
            );
            check_em = false;
            e.preventDefault();
         else if (validateEmail(email)) 
            $("#email").css(
                "border": "",
                "background": ""
            );
            check_em = true;
         else 
            $("#email").css(
                "border": "1px solid red"
            );
            check_em = false;
            e.preventDefault();
        
        if (check_em && isValid) 
            $(this).attr('data-dismiss', "modal");
            $(this).attr('data-target', "#myModalnew1");
        
    );
);

function validateEmail(email) 
    var filter = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-z]2,4$/;
    return filter.test(email);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />	
</head>
<body>
<button class="btn btn-primary main" data-toggle="modal" data-target="#myModalnew" data-dismiss="modal">Check</button>
<div class="modal_main">
<div class="modal fade" id="myModalnew" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>

<h2 class="modal-title">Heading</h2>
<h4>Details</h4>
</div>
<div class="modal-body border">
<form id="contact" method="POST">
<fieldset>
<div class="input-group email">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input id="email" type="email" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group name">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="name" type="text" class="form-control" placeholder="Name">
</div>
<div class="tab-content">
<div id="criteria_ship" class="tab-pane fade in active">
<div class="input-group address">
<span class="input-group-addon"><i class="glyphicon glyphicon-map-marker"></i></span>
<input id="address" type="text" class="form-control" placeholder="Street">
</div>
<div class="input-group town">  
<input type="text" class="form-control" id="city" placeholder="City">
<input type="text" class="form-control" id="postcode" placeholder="Postcode">
</div>
<div class="paybutton">
<input type="submit" class="but_key but_link" id="pay"  value="Payment" data-toggle="modal" data-target="#" data-dismiss=""
>
</div>
</div>  
</div>  
</fieldset>
</form>         
</div>
</div>
</div>
</div>  
<div class="modal fade" id="myModalnew1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<a href="#myModalnew" id="previous" data-toggle="modal" data-dismiss="modal">  </a>
<h2 class="modal-title">getsmartnet.com</h2>
<h4>Smartnet's Payment</h4>
</div>
<div class="modal-body">
<form>
<fieldset>
<div class="main_card">
<div class="input-group card">
<span class="input-group-addon"><i class="glyphicon glyphicon-credit-card"></i></span>
<input id="card" type="text" class="form-control" placeholder="Card Number">
</div>
<div>
<div class="input-group date">  
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input type="text" class="form-control" id="expiry" placeholder="MM/YY">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="text" class="form-control" id="code" placeholder="CVC">
</div>
</div>
<div class="input-group check_rem">
<input type="checkbox" id="rem_check"> Remember Me
</div>
<fieldset id="main_rem">
<div class="input-group forgot"id="check_mobile">
<div class="input-group">
<span>For security, please enter your <strong><span>mobile phone number</span></strong>
</span>
</div>
<div class="input-group mob_rem">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input type="tel" class="form-control" id="mob_num">
</div>
</div>
</fieldset>
<fieldset>
<div class="but_link">
<a href="#" class="but_key">Pay</a>
</div>
</fieldset>
</div>  
</fieldset>
</form>
</div>
</div>  
</div>  
</div>  
</div>	
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

【讨论】：

以上是关于模态需要在验证后进行验证，它应该移动到另一个模态的主要内容，如果未能解决你的问题，请参考以下文章

从 POST 操作验证模态后无法正常工作

iOS6 上的 GKLocalPlayer 身份验证崩溃并出现模态转换错误

验证错误laravel后保持模态对话框打开

在模态表单中使用 Spring Boot 和 thymeleaf 进行服务器端验证

element el-form如何避免打开模态框时就进行表单验证

Qt如何使用模态(exec())实现等待效果，并同时进行其他操作？（先显示等待，再进行其他操作！）