在这段代码中,我需要在验证后验证模态,它应该移动到另一个模态 在jquery中,我已经验证成功验证了数据目标已经添加到jquery代码中,但它无法正常工作
为详细视图添加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">×</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">×</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>
答案 0 :(得分:0)
即使在验证成功后,您的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">×</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">×</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>