增加表单错误提示
This commit is contained in:
huangjinming
parent
b8ea84a19f
commit
0a2fb39840
@ -1497,7 +1497,28 @@ span.swiper-pagination-bullet {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -2,48 +2,78 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
|
||||
/>
|
||||
<title>CEBG: CRYPTO ELITE‘S BATTLEGROUNDS</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<section class="main">
|
||||
<section class="header">
|
||||
<img src="img/applyother/a1.png" width="100%" />
|
||||
<script>cur = 'activity'; sub='act2'</script>
|
||||
<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>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<input type="checkbox" class="checkbox" id="dis" name="dis" />
|
||||
<label for="dis">Joined CEBG Discrod?</label>
|
||||
</p>
|
||||
|
||||
@ -51,7 +81,6 @@
|
||||
<span class="submit" id="submit_btn">Send</span>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -63,62 +92,81 @@
|
||||
</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
|
||||
src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"
|
||||
integrity="sha256-JwUksNJ6/R07ZiLRoXbGeNrtlFZMFDKX4hemPiHOmCA="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script>
|
||||
const FORM_URL = 'https://invitation.cebggame.com/invitation/add_commander';
|
||||
const CHECK_URL = 'https://invitation.cebggame.com/invitation/check_bind_commander';
|
||||
const FORM_URL =
|
||||
"https://invitation.cebggame.com/invitation/add_commander";
|
||||
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);
|
||||
}
|
||||
function getUrlParam(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (r != null) return unescape(r[2]); return null;
|
||||
if (r != null) return unescape(r[2]);
|
||||
return null;
|
||||
}
|
||||
let ambassador = getUrlParam('amb') || '';
|
||||
let ambassador = getUrlParam("amb") || "";
|
||||
$("#signupForm").validate({
|
||||
success: "valid",
|
||||
rules: {
|
||||
nickname: { required: true, rangelength: [3, 20] },
|
||||
email: { required: true, email: true },
|
||||
location: {required: true, minlength: 2}
|
||||
|
||||
location: { required: true, minlength: 2 },
|
||||
},
|
||||
messages: {
|
||||
nickname: "Enter at least 3 words. Enter a maximum of 20 words.",
|
||||
email: "Please enter your correct email address.",
|
||||
location: "This field cannot be empty. Please enter your country of residence."
|
||||
location:
|
||||
"This field cannot be empty. Please enter your country of residence.",
|
||||
},
|
||||
submitHandler: function (form) {
|
||||
postData(generateFormData());
|
||||
}
|
||||
},
|
||||
});
|
||||
$('#submit_btn').click(function() {
|
||||
$("#submit_btn").click(function () {
|
||||
if (window.chain.logined) {
|
||||
$('#signupForm').submit();
|
||||
$("#signupForm").submit();
|
||||
} else {
|
||||
window.chainLogin(async function () {
|
||||
let result = await checkJoined(window.chain.account);
|
||||
if (result) {
|
||||
showSuccess();
|
||||
} else {
|
||||
$('#signupForm').submit();
|
||||
$("#signupForm").submit();
|
||||
}
|
||||
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
});
|
||||
var generateFormData = () => {
|
||||
return {
|
||||
account: window.chain.account,
|
||||
ambassador,
|
||||
email: $('#email').val(),
|
||||
name: $('#nickname').val(),
|
||||
from: $('#location').val(),
|
||||
bcexp: $('#ever').prop('checked')? 1: 0,
|
||||
followcebg: $('#alr').prop('checked')? 1: 0,
|
||||
joinedcebg: $('#dis').prop('checked')? 1: 0
|
||||
}
|
||||
}
|
||||
email: $("#email").val(),
|
||||
name: $("#nickname").val(),
|
||||
from: $("#location").val(),
|
||||
bcexp: $("#ever").prop("checked") ? 1 : 0,
|
||||
followcebg: $("#alr").prop("checked") ? 1 : 0,
|
||||
joinedcebg: $("#dis").prop("checked") ? 1 : 0,
|
||||
};
|
||||
};
|
||||
var postData = async (formData) => {
|
||||
var headers = new Headers();
|
||||
headers.append("Content-Type", "application/json");
|
||||
@ -126,59 +174,53 @@
|
||||
formData.token = window.chain.token;
|
||||
}
|
||||
try {
|
||||
let data = await fetch(
|
||||
FORM_URL,
|
||||
{
|
||||
method: 'POST',
|
||||
let data = await fetch(FORM_URL, {
|
||||
method: "POST",
|
||||
headers,
|
||||
mode: 'cors',
|
||||
cache: 'no-cache',
|
||||
body: JSON.stringify(formData)
|
||||
},
|
||||
)
|
||||
.then(res => {
|
||||
return res.json()
|
||||
})
|
||||
mode: "cors",
|
||||
cache: "no-cache",
|
||||
body: JSON.stringify(formData),
|
||||
}).then((res) => {
|
||||
return res.json();
|
||||
});
|
||||
if (!data.errcode) {
|
||||
showSuccess();
|
||||
}else{
|
||||
showMessage("Submit failed", 0);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('error post data', err);
|
||||
}
|
||||
console.log("error post data", err);
|
||||
}
|
||||
};
|
||||
var checkJoined = async function (account) {
|
||||
var headers = new Headers();
|
||||
headers.append("Content-Type", "application/json");
|
||||
let data = {account}
|
||||
let data = { account };
|
||||
if (window.chain.logined) {
|
||||
data.token = window.chain.token;
|
||||
}
|
||||
try {
|
||||
let resData = await fetch(
|
||||
CHECK_URL,
|
||||
{
|
||||
method: 'POST',
|
||||
let resData = await fetch(CHECK_URL, {
|
||||
method: "POST",
|
||||
headers,
|
||||
mode: 'cors',
|
||||
cache: 'no-cache',
|
||||
body: JSON.stringify({account})
|
||||
},
|
||||
)
|
||||
.then(res => {
|
||||
return res.json()
|
||||
})
|
||||
mode: "cors",
|
||||
cache: "no-cache",
|
||||
body: JSON.stringify({ account }),
|
||||
}).then((res) => {
|
||||
return res.json();
|
||||
});
|
||||
if (!resData.errcode && resData.result) {
|
||||
return resData.result.chk === 1
|
||||
return resData.result.chk === 1;
|
||||
} else {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
} catch (err) {
|
||||
return false
|
||||
}
|
||||
return false;
|
||||
}
|
||||
};
|
||||
function showSuccess() {
|
||||
$('#success_tip').show()
|
||||
$('#form_layer').hide()
|
||||
$("#success_tip").show();
|
||||
$("#form_layer").hide();
|
||||
}
|
||||
async function checkStatus() {
|
||||
if (window.chain && window.chain.logined) {
|
||||
@ -188,9 +230,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
window.addEventListener('account_ready', function() {
|
||||
checkStatus()
|
||||
})
|
||||
window.addEventListener("account_ready", function () {
|
||||
checkStatus();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -298,7 +298,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 武器介绍层 -->
|
||||
<!-- 武器介绍层 -->hero_skill_movie
|
||||
<section class="hero-d-layer weapon-view">
|
||||
<div class="hero-d-layer-inner">
|
||||
<div class="hero-d-layer-con">
|
||||
|
||||
@ -102,6 +102,7 @@
|
||||
});
|
||||
galleryTop.params.control = galleryThumbs;
|
||||
galleryThumbs.params.control = galleryTop;
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user