禁用仅在HTML和CSS中提交表单

Question

我正在添加一个代码块到所有js被禁用和剥离的页面。我想添加一个验证码的形式，以减少垃圾邮件。我快要弄好了，可是怎么也动不了。

我的问题是:

1. 我用来验证所需字段的js代码被剥离。有没有什么方法可以在不使用js的情况下把验证放回去?
2. 我不知道如何连接启用提交到recapthca复选框。

这是我已经让它工作的代码…

<!-- Note :
- You can modify the font style and form style to suit your website. 
- Code lines with comments Do not remove this code are required for the form to work properly, make sure that you do not remove these lines of code. 
- The Mandatory check script can modified as to suit your business needs. 
- It is important that you test the modified form before going live.-->
<div id='crmWebToEntityForm' class='zcwf_lblLeft crmWebToEntityForm' style='background-color: white;color: black;max-width: 600px;'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<META HTTP-EQUIV ='content-type' CONTENT='text/html;charset=UTF-8'>
<form action='https://crm.zoho.com/crm/WebToLeadForm' name=WebToLeads2983403000000507130 method='POST' onSubmit='javascript:document.charset="UTF-8"; return checkMandatory2983403000000507130()' accept-charset='UTF-8'>
<input type='text' style='display:none;' name='xnQsjsdp' value='d8a8809b8fe787eb5f1520e8345aa1f4461cf539b2b1505c31cd3765336f8089'></input> 
<input type='hidden' name='zc_gad' id='zc_gad' value=''></input> 
<input type='text' style='display:none;' name='xmIwtLD' value='da656ccd402f059702a554831941786995278d8da723e570a30ed6c9d5d4a5b5'></input> 
<input type='text'  style='display:none;' name='actionType' value='TGVhZHM='></input>
<input type='text' style='display:none;' name='returnURL' value='https://www.monkeytronics.co.nz/' > </input>
<!-- Do not remove this code. -->
<style>
/* <!-- Stick in a recaptcha --> */
body {
margin:0;
background-image:url(https://cdn.theculturetrip.com/wp-content/uploads/2020/08/gettyimages-904801296.jpg);
background-size:cover;
background-position:center;
display:flex;
justify-content:center;
align-items:center;
font-family: 'Roboto', sans-serif;
}
.captcha {
background-color:#f9f9f9;
border:2px solid #d3d3d3;
border-radius:10px;
color:#4c4a4b;
display:flex;
justify-content:center;
align-items:center;
}
@media screen and (max-width: 500px) {
.captcha {
flex-direction:column;
}
.text {
margin:.5em!important;
text-align:center;
}
.logo {
align-self: center!important;
}
.spinner {
margin:2em .5em .5em .5em!important;
}
}
.text {
font-size:1em;
font-weight:500;
margin-right:1em;
}
.spinner {
position:relative;
width:2em;
height:2em;
display:flex;
margin:2em 1em;
align-items:center;
justify-content:center;
}
input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; }
input[type="checkbox"]+.checkmark {
display:inline-block;
width:2em;
height:2em;
background-color:#fcfcfc;
border:2.5px solid #c3c3c3;
border-radius:3px;
display:flex;
justify-content:center;
align-items:center;
cursor: pointer;
}
input[type="checkbox"]+.checkmark span {
content:'';
position:relative;/*
position:absolute;
border-bottom:3px solid;
border-right:3px solid;
border-color:#029f56;*/
margin-top:-3px;
transform:rotate(45deg);
width:.75em;
height:1.2em;
opacity:0;
}
input[type="checkbox"]+.checkmark>span:after {
content:'';
position:absolute;
display:block;
height:3px;
bottom:0;left:0;
background-color:#029f56;
}
input[type="checkbox"]+.checkmark>span:before {
content:'';
position:absolute;
display:block;
width:3px;
bottom:0;right:0;
background-color:#029f56;
}
input[type="checkbox"]:checked+.checkmark { 
animation:2s spin forwards;
}
input[type="checkbox"]:checked+.checkmark>span { 
animation:1s fadein 1.9s forwards;
}
input[type="checkbox"]:checked+.checkmark>span:after {animation:.3s bottomslide 2s forwards;}
input[type="checkbox"]:checked+.checkmark>span:before {animation:.5s rightslide 2.2s forwards;}
@keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes bottomslide {
0% {width:0;}
100% {width:100%;}
}
@keyframes rightslide {
0% {height:0;}
100% {height:100%;}
}
.logo {
display:flex;
flex-direction:column;
align-items:center;
height:100%;
align-self:flex-end;
margin:0.5em 1em;
}
.logo img {
height:2em;
width:2em;
}
.logo p {
color:#9d9ba7;
margin:0;
font-size:1em;
font-weight:700;
margin:.4em 0 .2em 0;
}
.logo small {
color:#9d9ba7;
margin:0;
font-size:.8em;
}
@keyframes spin {
10% {
width:0;
height:0;
border-width:6px;
}
30% {
width:0;
height:0;
border-radius:50%;
border-width:1em;
transform: rotate(0deg);
border-color:rgb(199,218,245);
}
50% {
width:2em;
height:2em;
border-radius:50%;
border-width:4px;
border-color:rgb(199,218,245);
border-right-color:rgb(89,152,239);
}
70% {
border-width:4px;
border-color:rgb(199,218,245);
border-right-color:rgb(89,152,239);
}
90% {
border-width:4px;
}
100% {
width:2em;
height:2em;
border-radius:50%;
transform: rotate(720deg);
border-color:transparent;
}
}
::selection {
background-color:transparent;
color:teal;
}
::-moz-selection {
background-color:transparent;
color:teal;
}

html,body{
margin: 0px;
}
#crmWebToEntityForm.zcwf_lblLeft {
width:100%;
padding: 25px;
margin: 0 auto;
box-sizing: border-box;
}
#crmWebToEntityForm.zcwf_lblLeft * {
box-sizing: border-box;
}
#crmWebToEntityForm{text-align: left;}
#crmWebToEntityForm * {
direction: ltr;
}
.zcwf_lblLeft .zcwf_title {
word-wrap: break-word;
padding: 0px 6px 10px;
font-weight: bold;
}
.zcwf_lblLeft .zcwf_col_fld input[type=text], .zcwf_lblLeft .zcwf_col_fld textarea {
width: 60%;
border: 1px solid #ccc;
resize: vertical;
border-radius: 2px;
float: left;
}
.zcwf_lblLeft .zcwf_col_lab {
width: 30%;
word-break: break-word;
padding: 0px 6px 0px;
margin-right: 10px;
margin-top: 5px;
float: left;
min-height: 1px;
}
.zcwf_lblLeft .zcwf_col_fld {
float: left;
width: 68%;
padding: 0px 6px 0px;
position: relative;
margin-top: 5px;
}
.zcwf_lblLeft .zcwf_privacy{padding: 6px;}
.zcwf_lblLeft .wfrm_fld_dpNn{display: none;}
.dIB{display: inline-block;}
.zcwf_lblLeft .zcwf_col_fld_slt {
width: 60%;
border: 1px solid #ccc;
background: #fff;
border-radius: 4px;
font-size: 16px;
float: left;
resize: vertical;
}
.zcwf_lblLeft .zcwf_row:after, .zcwf_lblLeft .zcwf_col_fld:after {
content: '';
display: table;
clear: both;
}
.zcwf_lblLeft .zcwf_col_help {
float: left;
margin-left: 7px;
font-size: 16px;
max-width: 35%;
word-break: break-word;
}
.zcwf_lblLeft .zcwf_help_icon {
cursor: pointer;
width: 16px;
height: 16px;
display: inline-block;
background: #fff;
border: 1px solid #ccc;
color: #ccc;
text-align: center;
font-size: 14px;
line-height: 16px;
font-weight: bold;
border-radius: 50%;
}
.zcwf_lblLeft .zcwf_row {margin: 15px 0px;}
.zcwf_lblLeft .formsubmit {
margin-right: 5px;
cursor: pointer;
color: #333;
font-size: 16px;
}
.zcwf_lblLeft .zcwf_privacy_txt {
color: rgb(0, 0, 0);
font-size: 16px;
font-family: Arial;
display: inline-block;
vertical-align: top;
color: #333;
padding-top: 2px;
margin-left: 6px;
}
.zcwf_lblLeft .zcwf_button_submit {
font-size: 16px;
color: #00C3E8;
border: 2px solid #00C3E8;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zcwf_lblLeft .zcwf_button {
font-size: 16px;
color: #333;
border: 2px solid #ccc;
padding: 10px 23px;
border-radius: 10px;
cursor: pointer;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zcwf_lblLeft .zcwf_tooltip_over{
position: relative;
}
.zcwf_lblLeft .zcwf_tooltip_ctn{
position: absolute;
background: #dedede;
padding: 3px 6px;
top: 3px;
border-radius: 4px;word-break: break-all;
min-width: 50px;
max-width: 150px;
color: #333;
}
.zcwf_lblLeft .zcwf_ckbox{
float: left;
}
.zcwf_lblLeft .zcwf_file{
width: 55%;
box-sizing: border-box;
float: left;
}
.clearB:after{
content:'';
display: block;
clear: both;
}
@media all and (max-width: 600px) {
.zcwf_lblLeft .zcwf_col_lab, .zcwf_lblLeft .zcwf_col_fld {
width: auto;
float: none !important;
}
.zcwf_lblLeft .zcwf_col_help {width: 40%;}
}
</style>
<div class='zcwf_title' style='font-size:20px; max-width: 600px;color: #00C3E8;'>Contact Monkeytronics</div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='First_Name'>First Name</label></div><div class='zcwf_col_fld'><input type='text' id='First_Name' name='First Name' maxlength='40'></input><div class='zcwf_col_help'></div></div></div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='Last_Name'>Last Name<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' id='Last_Name' name='Last Name' maxlength='80'></input><div class='zcwf_col_help'></div></div></div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='Email'>Email<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' ftype='email' id='Email' name='Email' maxlength='100'></input><div class='zcwf_col_help'></div></div></div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='Company'>Company<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' id='Company' name='Company' maxlength='100'></input><div class='zcwf_col_help'></div></div></div>
<div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:16px; font-family: Arial;'><label for='Description'>How can we help?<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><textarea id='Description' name='Description'></textarea><div class='zcwf_col_help'></div></div></div><div class='zcwf_row'><div class='zcwf_col_lab'></div><div class='zcwf_col_fld'><input type='submit' id='formsubmit' class='formsubmit zcwf_button_submit' value='Submit' title='Submit'><input type='reset' class='zcwf_button' name='reset' value='Reset' title='Reset'></div></div>
<div class="captcha">
<div class="spinner">
<label>
<input type="checkbox" onclick="$(this).attr('disabled','disabled');">
<span class="checkmark"><span>&nbsp;</span></span>
</label>
</div>
<div class="text">
I'm not a robot
</div>
<div class="logo">
<img src="https://forum.nox.tv/core/index.php?media/9-recaptcha-png/"/>
<p>reCAPTCHA</p>
<small>Privacy - Terms</small>
</div>
</div>
<script>
function validateEmail2983403000000507130()
{
var form = document.forms['WebToLeads2983403000000507130'];
var emailFld = form.querySelectorAll('[ftype=email]');
var i;
for (i = 0; i < emailFld.length; i++)
{
var emailVal = emailFld[i].value;
if((emailVal.replace(/^s+|s+$/g, '')).length!=0 )
{
var atpos=emailVal.indexOf('@');
var dotpos=emailVal.lastIndexOf('.');
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=emailVal.length)
{
alert('Please enter a valid email address. ');
emailFld[i].focus();
return false;
}
}
}
return true;
}
function checkMandatory2983403000000507130() {
var mndFileds = new Array('Company','Last Name','Email','Description');
var fldLangVal = new Array('Company','Last Name','Email','How can we help?');
for(i=0;i<mndFileds.length;i++) {
var fieldObj=document.forms['WebToLeads2983403000000507130'][mndFileds[i]];
if(fieldObj) {
if (((fieldObj.value).replace(/^s+|s+$/g, '')).length==0) {
if(fieldObj.type =='file')
{ 
alert('Please select a file to upload.'); 
fieldObj.focus(); 
return false;
} 
alert(fldLangVal[i] +' cannot be empty'); 
fieldObj.focus();
return false;
}  else if(fieldObj.nodeName=='SELECT') {
if(fieldObj.options[fieldObj.selectedIndex].value=='-None-') {
alert(fldLangVal[i] +' cannot be none'); 
fieldObj.focus();
return false;
}
} else if(fieldObj.type =='checkbox'){
if(fieldObj.checked == false){
alert('Please accept  '+fldLangVal[i]);
fieldObj.focus();
return false;
} 
} 
try {
if(fieldObj.name == 'Last Name') {
name = fieldObj.value;
}
} catch (e) {}
}
}
if(!validateEmail2983403000000507130()){return false;}
document.querySelector('.crmWebToEntityForm .formsubmit').setAttribute('disabled', true);
}
function tooltipShow2983403000000507130(el){
var tooltip = el.nextElementSibling;
var tooltipDisplay = tooltip.style.display;
if(tooltipDisplay == 'none'){
var allTooltip = document.getElementsByClassName('zcwf_tooltip_over');
for(i=0; i<allTooltip.length; i++){
allTooltip[i].style.display='none';
}
tooltip.style.display = 'block';
}else{
tooltip.style.display='none';
}
}
</script>
</form>
</div>

Answer 1

你可以尝试在表单的输入元素上使用required，对于captcha你应该添加一些功能当你点击提交时你应该检查captcha复选框是否被点击(现在有一些jquery代码但是你的网页上没有jquery)

Answer 2

使用禁用属性!

下面是一个例子:

<form> <input type = "submit" disabled="disabled">Submit</input></form>

使用这个将使按钮变灰!