表單驗證 - 錯誤消息不輸出
[英]Form validation - Error Message not output
問題描述
我成功輸出成功消息但沒有輸出錯誤消息？ 錯誤必須在最后的 else 語句之前的 if 語句中，但我看不到在哪里。 有人會有什么想法嗎？
提交后是否還有淡出方式刪除表單並留下“你做到了！ 恭喜”的文字？
<html>
<head>
<link rel="stylesheet" type="text/css" href="forms.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>jQuery</title>
</head>
<body>
<div id="wrapper">
<div id="errorMessage"></div>
<div id="successMessage">You did it! Congratulations!</div>
<div class="form-element">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="yourname@email.com">
</div>
<div class="form-element">
<label for="phone">Phone</label>
<input type="phone" name="phone" id="phone" placeholder="Eg: 0879688552">
</div>
<div class="form-element">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-element">
<label for="confirm-password">Confirm Password</label>
<input type="password" name="confirm-password" id="confirm-password">
</div>
<div class="form-element">
<input type="submit" id="submit" value="Sign Up">
</div>
<script type="text/javascript">
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
$("#submit").click(function() {
var errorMessage = "";
var fieldsMissing = "";
if ($("#email").val() == "") {
fieldsMissing += "<br> Email"
}
if ($("#phone").val() == "") {
fieldsMissing += "<br> Phone"
}
if ($("#password").val() == "") {
fieldsMissing += "<br> password"
}
if ($("#confirm-password").val() == "") {
fieldsMissing += " Confirm Password"
}
if (fieldsMissing != "") {
errorMessage+= "Fields Missings:" + fieldsMissing;
}
if (isEmail($("#email").val()) == false) {
errorMessage+= "Your email address is not valid! ";
}
if ($.isNumeric($("#phone").val()) == false) {
errorMessage+= "Your phone number is not valid!";
}
if ($("#password").val() != $("#confirm-password").val()) {
errorMessage += "Your passwords don't match! ";
}
if (errorMessage != "") {
$("#errorMessage").html(errorMessage);
}
else {
$("#successMessage").show();
$("#errorMessage").hide();
}
});
</script>
</body>
</html>
2 個解決方案
解決方案1
1 已采納 2018-02-23 11:44:26
You can try like this
if (errorMessage != "") {
$("#successMessage").hide();
$("#errorMessage").html(errorMessage);
return false;
} else {
$(".form-element").hide();
$("#successMessage").show();
$("#errorMessage").hide();
}
解決方案2
1 2018-02-23 11:46:18
我不知道你是如何制作 errorMessage 風格的，但似乎你沒有展示它
if (errorMessage != "") { $("#errorMessage").html(errorMessage).show(); } else { $("#successMessage").show(); $("#errorMessage").hide(); }這 .show(); 應該修復它
jQuery表單驗證中的錯誤消息
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.