仅在 html 和 css 中禁用表单提交

Question

我正在向禁用并删除所有 js 的页面添加一个代码块。我想在表单中添加一个recaptcha 以减少垃圾邮件。我快搞定了，但无法让它工作。

我的问题是：

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， 对于验证码，您应该在单击提交时添加一些功能，您应该检查验证码复选框是否被单击（现在上面有一些 jquery 代码，但您的网络上没有 jquery）

Answer 2

使用禁用属性！

这是一个例子：

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

使用此按钮会使按钮变灰！