javascript-提交表单的模式框
作者：互联网
我试图在提交表单时生成一个模式框,但是当我提交它时,它没有验证所需的输入,因为它是type =’button’.如果我将其替换为“提交”,则不会显示弹出框.同时,我想验证,然后再生成弹出.有人可以帮我这个忙！
<html>
<head>
<meta name="viewport" content="width = device-width , initial-scale = 1.0">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form>
<div class="form-group">
<label for="water">Enter Water :</label>
<input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
</div>
<div class="form-group">
<label for="compressiveStrength">Compresive Strength :</label>
<input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
</div>
<div class="form-group">
<label for="plasticViscosity">Plastic Viscosity :</label>
<input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
</div>
<div class="form-group">
<label for="fiber">Fiber Volume Fraction :</label>
<input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
</div>
<div class="form-group">
<label for="aspectRatio">Aspect Ratio :</label>
<select id="aspectRatio" class="form-control">
<option>60</option>
<option>50</option>
</select>
</div>
<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-lg">Generate</button>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Result</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</html>
解决方法:
只需防止出现以下默认行为：
$('#form1').submit(function(event){
// cancels the form submission
event.preventDefault();
//If the form is valid open modal
if($('#form1')[0].checkValidity() ){
$('#myModal').modal('toggle');
}
// do whatever you want here
});
因此,对于您的示例,它将是：
<html>
<head>
<meta name="viewport" content="width = device-width , initial-scale = 1.0">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form id="form1" name="form1">
<div class="form-group">
<label for="water">Enter Water :</label>
<input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
</div>
<div class="form-group">
<label for="compressiveStrength">Compresive Strength :</label>
<input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
</div>
<div class="form-group">
<label for="plasticViscosity">Plastic Viscosity :</label>
<input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
</div>
<div class="form-group">
<label for="fiber">Fiber Volume Fraction :</label>
<input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
</div>
<div class="form-group">
<label for="aspectRatio">Aspect Ratio :</label>
<select id="aspectRatio" class="form-control">
<option>60</option>
<option>50</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-lg">Generate</button>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Result</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$('#form1').submit(function(event){
// cancels the form submission
event.preventDefault();
if($('#form1')[0].checkValidity() ){
$('#myModal').modal('toggle');
}
// do whatever you want here
});
</script>
</html>
有关更多信息,请查看：
https://stackoverflow.com/a/5688798/7667467
标签：twitter-bootstrap,modal-dialog,css,javascript,jquery 来源： https://codeday.me/bug/20191111/2021193.html