验证后需要验证模态，应移至另一个模态

在此代码中，我需要在验证后验证模态，它应该移至另一个模态在JQuery中，我在成功验证数据目标后已在jQuery代码中添加了验证，但是它无法正常工作

详细视图的小提琴链接

输入值后，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>

即使在验证成功之后，您的isValid仍保持false，因此if(check_em==true && 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>

相关内容

最新更新

热门标签：