增加表单错误提示

This commit is contained in:
huangjinming 2022-11-08 15:33:55 +08:00
parent b8ea84a19f
commit 0a2fb39840
5 changed files with 508 additions and 444 deletions

View File

@ -1497,7 +1497,28 @@ span.swiper-pagination-bullet {
font-family: na-he; font-family: na-he;
} }
.showMessage {
padding: 10px 20px;
border-radius: 5px;
position: fixed;
top: 15%;
left: 50%;
color: #ffffff;
z-index: 999;
transform: translate(-50%, 0);
}
.showMessageSuccess {
background-color: #f0f9eb;
border: 1px solid #E1F3D8;
color: #67c23a;
}
.showMessageError {
background-color: #fef0f0;
border: 1px solid #fde2e2;
color: #F76C6C;
}

View File

@ -1,197 +1,239 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta
<title>CEBG: CRYPTO ELITES BATTLEGROUNDS</title> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<title>CEBG: CRYPTO ELITES BATTLEGROUNDS</title>
</head>
<body>
<section class="main">
<section class="header">
<img src="img/applyother/a1.png" width="100%" />
<script>
cur = "activity";
sub = "act2";
</script>
<%- include('../comp/desktopNav.html') %>
</section>
<section class="main-con">
<div class="apply-wrap" id="form_layer">
<div class="apply-inner">
<h5 class="apply-tip tac">
<img src="img/applyother/ap-tip.png" />
</h5>
<div class="apply-from">
<form class="cmxform" id="signupForm" method="get" action="#">
<div>
<p for="nickname"><strong>Nickname</strong></p>
<input
id="nickname"
class="text"
name="nickname"
type="text"
maxlength="20"
autocomplete="off"
/>
</div>
<div>
<p for="email"><strong>E-mail</strong></p>
<input
id="email"
class="text"
name="email"
type="text"
autocomplete="off"
/>
</div>
<div>
<p for="location"><strong>From</strong></p>
<input
id="location"
class="text"
name="location"
type="text"
autocomplete="off"
/>
</div>
<p class="checkbox-wrap">
<input
type="checkbox"
class="checkbox"
id="ever"
name="ever"
/>
<label for="ever">Blockchain experience?</label>
</p>
<p class="checkbox-wrap">
<input type="checkbox" class="checkbox" id="alr" name="alr" />
<label for="alr">Followed CEBG Twitter?</label>
</p>
<p class="checkbox-wrap">
<input type="checkbox" class="checkbox" id="dis" name="dis" />
<label for="dis">Joined CEBG Discrod?</label>
</p>
</head> <p class="tac submit-btn">
<body> <span class="submit" id="submit_btn">Send</span>
<section class="main"> </p>
<section class="header"> </form>
<img src="img/applyother/a1.png" width="100%" /> </div>
<script>cur = 'activity'; sub='act2'</script> </div>
<%- include('../comp/desktopNav.html') %> </div>
</section> <div class="feedback-inner tac hide" id="success_tip">
<section class="main-con"> <img src="img/applyother/fb1.png" />
<div class="apply-wrap" id="form_layer"> </div>
<div class="apply-inner"> </section>
<h5 class="apply-tip tac"><img src="img/applyother/ap-tip.png" /></h5> <%- include('../comp/footer.html') %>
<div class="apply-from"> </section>
<%- include('../comp/walletModal.html') %> <%- include('../comp/jslib.html')
<form class="cmxform" id="signupForm" method="get" action="#">
<div>
<p for="nickname"><strong>Nickname</strong></p>
<input id="nickname" class="text" name="nickname" type="text" maxlength=20 autocomplete="off">
</div>
<div>
<p for="email"><strong>E-mail</strong></p>
<input id="email" class="text" name="email" type="text" autocomplete="off">
</div>
<div>
<p for="location"><strong>From</strong></p>
<input id="location" class="text" name="location" type="text" autocomplete="off">
</div>
<p class="checkbox-wrap">
<input type="checkbox" class="checkbox" id="ever" name="ever">
<label for="ever">Blockchain experience?</label>
</p>
<p class="checkbox-wrap">
<input type="checkbox" class="checkbox" id="alr" name="alr">
<label for="alr">Followed CEBG Twitter?</label>
</p>
<p class="checkbox-wrap">
<input type="checkbox" class="checkbox" id="dis" name="dis">
<label for="dis">Joined CEBG Discrod?</label>
</p>
<p class="tac submit-btn">
<span class="submit" id="submit_btn">Send</span>
</p>
</form>
</div>
</div>
</div>
<div class="feedback-inner tac hide" id="success_tip">
<img src="img/applyother/fb1.png"/>
</div>
</section>
<%- include('../comp/footer.html') %>
</section>
<%- include('../comp/walletModal.html') %> <%- include('../comp/jslib.html')
%> %>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js" integrity="sha256-JwUksNJ6/R07ZiLRoXbGeNrtlFZMFDKX4hemPiHOmCA=" crossorigin="anonymous"></script> <script
<script> src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"
const FORM_URL = 'https://invitation.cebggame.com/invitation/add_commander'; integrity="sha256-JwUksNJ6/R07ZiLRoXbGeNrtlFZMFDKX4hemPiHOmCA="
const CHECK_URL = 'https://invitation.cebggame.com/invitation/check_bind_commander'; crossorigin="anonymous"
$().ready(function() { ></script>
function getUrlParam(name) { <script>
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); const FORM_URL =
var r = window.location.search.substr(1).match(reg); "https://invitation.cebggame.com/invitation/add_commander";
if (r != null) return unescape(r[2]); return null; const CHECK_URL =
"https://invitation.cebggame.com/invitation/check_bind_commander";
$().ready(function () {
function showMessage(message, type) {
let messageJQ = $("<div class='showMessage'>" + message + "</div>");
if (type == 0) {
messageJQ.addClass("showMessageError");
} else if (type == 1) {
messageJQ.addClass("showMessageSuccess");
}
messageJQ.hide().appendTo("body").slideDown(400);
window.setTimeout(function () {
messageJQ.show().slideUp(400, function () {
messageJQ.remove();
});
}, 4000);
} }
let ambassador = getUrlParam('amb') || ''; function getUrlParam(name) {
$("#signupForm").validate({ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
success:"valid", var r = window.location.search.substr(1).match(reg);
rules: { if (r != null) return unescape(r[2]);
nickname: {required: true, rangelength: [3, 20]}, return null;
email: {required: true, email: true}, }
location: {required: true, minlength: 2} let ambassador = getUrlParam("amb") || "";
$("#signupForm").validate({
}, success: "valid",
messages: { rules: {
nickname: "Enter at least 3 words. Enter a maximum of 20 words.", nickname: { required: true, rangelength: [3, 20] },
email: "Please enter your correct email address.", email: { required: true, email: true },
location: "This field cannot be empty. Please enter your country of residence." location: { required: true, minlength: 2 },
}, },
submitHandler: function(form) { messages: {
postData(generateFormData()); nickname: "Enter at least 3 words. Enter a maximum of 20 words.",
} email: "Please enter your correct email address.",
}); location:
$('#submit_btn').click(function() { "This field cannot be empty. Please enter your country of residence.",
if (window.chain.logined) { },
$('#signupForm').submit(); submitHandler: function (form) {
} else { postData(generateFormData());
window.chainLogin(async function(){ },
let result = await checkJoined(window.chain.account); });
if (result) { $("#submit_btn").click(function () {
showSuccess(); if (window.chain.logined) {
} else { $("#signupForm").submit();
$('#signupForm').submit(); } else {
} window.chainLogin(async function () {
let result = await checkJoined(window.chain.account);
}) if (result) {
} showSuccess();
} else {
}) $("#signupForm").submit();
var generateFormData = () => { }
return { });
account: window.chain.account, }
ambassador, });
email: $('#email').val(), var generateFormData = () => {
name: $('#nickname').val(), return {
from: $('#location').val(), account: window.chain.account,
bcexp: $('#ever').prop('checked')? 1: 0, ambassador,
followcebg: $('#alr').prop('checked')? 1: 0, email: $("#email").val(),
joinedcebg: $('#dis').prop('checked')? 1: 0 name: $("#nickname").val(),
} from: $("#location").val(),
} bcexp: $("#ever").prop("checked") ? 1 : 0,
var postData = async (formData) => { followcebg: $("#alr").prop("checked") ? 1 : 0,
var headers = new Headers(); joinedcebg: $("#dis").prop("checked") ? 1 : 0,
headers.append("Content-Type", "application/json"); };
};
var postData = async (formData) => {
var headers = new Headers();
headers.append("Content-Type", "application/json");
if (window.chain.logined) { if (window.chain.logined) {
formData.token = window.chain.token; formData.token = window.chain.token;
} }
try { try {
let data = await fetch( let data = await fetch(FORM_URL, {
FORM_URL, method: "POST",
{ headers,
method: 'POST', mode: "cors",
headers, cache: "no-cache",
mode: 'cors', body: JSON.stringify(formData),
cache: 'no-cache', }).then((res) => {
body: JSON.stringify(formData) return res.json();
}, });
) if (!data.errcode) {
.then(res => { showSuccess();
return res.json() }else{
}) showMessage("Submit failed", 0);
if (!data.errcode) { }
showSuccess(); } catch (err) {
} console.log("error post data", err);
} catch (err) { }
console.log('error post data', err); };
} var checkJoined = async function (account) {
} var headers = new Headers();
var checkJoined = async function(account) { headers.append("Content-Type", "application/json");
var headers = new Headers(); let data = { account };
headers.append("Content-Type", "application/json");
let data = {account}
if (window.chain.logined) { if (window.chain.logined) {
data.token = window.chain.token; data.token = window.chain.token;
} }
try { try {
let resData = await fetch( let resData = await fetch(CHECK_URL, {
CHECK_URL, method: "POST",
{ headers,
method: 'POST', mode: "cors",
headers, cache: "no-cache",
mode: 'cors', body: JSON.stringify({ account }),
cache: 'no-cache', }).then((res) => {
body: JSON.stringify({account}) return res.json();
}, });
) if (!resData.errcode && resData.result) {
.then(res => { return resData.result.chk === 1;
return res.json() } else {
}) return false;
if (!resData.errcode && resData.result) { }
return resData.result.chk === 1 } catch (err) {
} else { return false;
return false }
} };
} catch (err) { function showSuccess() {
return false $("#success_tip").show();
} $("#form_layer").hide();
} }
function showSuccess(){ async function checkStatus() {
$('#success_tip').show() if (window.chain && window.chain.logined) {
$('#form_layer').hide() let result = await checkJoined(window.chain.account);
} if (result) {
async function checkStatus() { showSuccess();
if (window.chain && window.chain.logined) { }
let result = await checkJoined(window.chain.account); }
if (result) { }
showSuccess(); window.addEventListener("account_ready", function () {
} checkStatus();
} });
} });
window.addEventListener('account_ready', function() { </script>
checkStatus() </body>
})
});
</script>
</body>
</html> </html>

View File

@ -298,7 +298,7 @@
</div> </div>
</section> </section>
<!-- 武器介绍层 --> <!-- 武器介绍层 -->hero_skill_movie
<section class="hero-d-layer weapon-view"> <section class="hero-d-layer weapon-view">
<div class="hero-d-layer-inner"> <div class="hero-d-layer-inner">
<div class="hero-d-layer-con"> <div class="hero-d-layer-con">

View File

@ -102,6 +102,7 @@
}); });
galleryTop.params.control = galleryThumbs; galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop; galleryThumbs.params.control = galleryTop;
</script> </script>
</body> </body>
</html> </html>

516
yarn.lock

File diff suppressed because it is too large Load Diff