表單驗證后如何顯示模態？
[英]How to show modal after validation of form?
問題描述
我希望在提交表單並檢查空字段（驗證）后會彈出一條消息（在模式上），並顯示消息“填寫所有表單。”？ 這個怎么做。 我試過了，但它沒有顯示錯誤，但它也沒有運行。 如果有人知道，請告訴遺漏或糾正它如何做到這一點。
<!-- language: lang-html -->
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript">
<!-- language: lang-js -->
function signup(){
var fName=document.getElementById("txtName").value;
var email=document.getElementById("txtEmail").value;
var password=document.getElementById("txtPassword").value;
var mobile=document.getElementById("nMobile").value;
if(fName=="" || email=="" || password=="" || mobile==""){
$("#valdMsg").modal("show");
}
}
</script>
</head>
<body>
<div class="modal fade" id="valdMsg" tabindex="-1" role="modal">
<div class="modal-dialog" role="document">
<div class="modal-header">
<h5>Warning!</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">
Fill out all forms.
</div>
</div>
</div>
<form>
<div style="margin-bottom:10px;">
<label for="txtName">Full Name</label>
<input type="text" id="txtName"/>
</div>
<div style="margin-bottom:10px;">
<label for="txtEmail">Email</label>
<input type="email" id="txtEmail"/>
</div>
<div style="margin-bottom:10px;">
<label for="txtPassword">Password</label>
<input type="text" id="txtPassword"/>
</div>
<div style="margin-bottom:10px;">
<label for="nMobile">Mobile Number</label>
<input type="number" id="nMobile"/>
</div>
<div>
<button type="submit" id="sign_up" onclick="signup()">
Sign Up
</button>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
<!-- end snippet -->
2 個解決方案
解決方案1
0 2020-07-28 06:23:40
- 不要在您的文件中使用多個 JQuery 實例
- 請檢查您的 Jquery 文件，某些 CDN 文件無法正常工作
- 請始終記住導入順序，首先我們必須導入 jquery 然后我們只需要導入所有其他 Javascript 庫
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
解決方案2
0 2020-07-28 06:44:11
除了@vasanth 提到的幾點，我已經將按鈕類型從提交更改為按鈕，這已經解決了問題
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<form>
<div style="margin-bottom:10px;">
<label for="txtName">Full Name</label>
<input type="text" id="txtName" />
</div>
<div style="margin-bottom:10px;">
<label for="txtEmail">Email</label>
<input type="email" id="txtEmail" />
</div>
<div style="margin-bottom:10px;">
<label for="txtPassword">Password</label>
<input type="text" id="txtPassword" />
</div>
<div style="margin-bottom:10px;">
<label for="nMobile">Mobile Number</label>
<input type="number" id="nMobile" />
</div>
<div>
<button type="button" id="sign_up" onclick="signup()">
Sign Up
</button>
</div>
</form>
<div class="modal" id="valdMsg" tabindex="-1" role="modal">
<div class="modal-dialog" role="document">
<div class="modal-header">
<h5>Warning!</h5>
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">
Fill out all forms.
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script>
function signup() {
var fName = document.getElementById("txtName").value;
var email = document.getElementById("txtEmail").value;
var password = document.getElementById("txtPassword").value;
var mobile = document.getElementById("nMobile").value;
if (!fName || !email || !password || !mobile) {
$("#valdMsg").modal();
}
}
</script>
</body>
</html>
<!-- end snippet -->
注意：它試圖在打開模態后提交表單，即 y 模態正在關閉
在Rails中提交bootstrap模態窗體后，如何顯示有錯誤的模態？
[英]After submitting bootstrap modal form in Rails, how to show modal with errors?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.