Question

这是一个带有数学Captcha的基本电子邮件表单。 Captcha正在工作，但表单验证器不是。当我说表单验证器时，我指的是所需的“名称”和“电子邮件”字段。如果我删除了Captcha代码，表单验证器工作正常。我认为表单验证器的js代码和Captcha的js代码在某种程度上相互冲突。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EiP - Contact Us</title>

<script type="text/javascript">
// Form validator for the required Name and Email fields
function MM_validateForm() { //v4.0
  if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
      if (val) { nm=val.name; if ((val=val.value)!="") {
        if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
          if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
        } else if (test!='R') { num = parseFloat(val);
          if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
          if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
            min=test.substring(8,p); max=test.substring(p+1);
            if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
      } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
    } if (errors) alert('The following error(s) occurred:\n'+errors);
    document.MM_returnValue = (errors == '');
} }
</script>
</head>
<body>  
    <p>Do you have a question or comment about EiP? We want to hear from you as your feedback is critical to our success.</p>
    <p class="required">*Required info</p>
    <form action="contactus.html" method="post" name="contactform" id="contactform" onsubmit="return checkform(this);MM_validateForm('name','','R','email','','RisEmail');return document.MM_returnValue">
    <p class="allforms">Full Name<span>*</span></p>
    <input name="name" type="text"  id="name"/>                        
    <p class="allformsRt">Email Address<span>*</span></p>
    <input type="text" name="email" id="email" />
    <p class="allforms">Company</p>
    <input name="company" type="text"  id="company" />
    <p class="allformsRt">Phone Number</p>
    <input type="text" name="phone" id="phone" />
    <p class="allforms">How can we help?</p>
    <textarea name="application" cols="35" rows="5" title="title" label="label" style="float:left">Type your questions, comments, feedback</textarea>
    <label for="code" style="float:left; clear:both">Write code below > <span id="txtCaptchaDiv" style="color:#F00"></span><!-- this is where the script will place the generated code --> 
    <input type="hidden" id="txtCaptcha" /></label><!-- this is where the script will place a copy of the code for validation: this is a hidden field -->
    <input type="text" name="txtInput" id="txtInput" size="30" style="float:left; clear:both" /> 
    <input name="Submit" type="submit" value="Contact Us" style="float:left; clear:both" />
        </form>

<script type="text/javascript">
//Generates the captcha function    
    var a = Math.ceil(Math.random() * 9)+ '';
    var b = Math.ceil(Math.random() * 9)+ '';       
    var c = Math.ceil(Math.random() * 9)+ '';  
    var d = Math.ceil(Math.random() * 9)+ '';  
    var e = Math.ceil(Math.random() * 9)+ '';  

    var code = a + b + c + d + e;
    document.getElementById("txtCaptcha").value = code;
    document.getElementById("txtCaptchaDiv").innerHTML = code;  
</script>

<script type="text/javascript">
function checkform(theform){
    var why = "";

    if(theform.txtInput.value == ""){
        why += "- Security code should not be empty.\n";
    }
    if(theform.txtInput.value != ""){
        if(ValidCaptcha(theform.txtInput.value) == false){
            why += "- Security code did not match.\n";
        }
    }
    if(why != ""){
        alert(why);
        return false;
    }
}

// Validate the Entered input aganist the generated security code function   
function ValidCaptcha(){
    var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
    var str2 = removeSpaces(document.getElementById('txtInput').value);
    if (str1 == str2){
        return true;    
    }else{
        return false;
    }
}

// Remove the spaces from the entered and generated code
function removeSpaces(string){
    return string.split(' ').join('');
}
</script>
</body>
</html>

Answer 1

你的onsubmit部分无法通过这种方式完成。如果安全代码是正确的，那么您返回undefined这不是假的，因此在调用MM_validateForm函数之前提交表单，该函数会检查所需的字段。

从标记中删除onsubmit=...部分，并将以下代码添加到您的网站

<script type="text\javascript">
    window.onload = function() {
        var form = document.getElementsByTagName("form")[0];    // get the form
        form.onsubmit = function() {
            if (checkform(this) != false) {
                MM_validateForm('name', '', 'R', 'email', '', 'RisEmail');
                return document.MM_returnValue;
            } else {
                return false;
            }
        };
    }
</script>

Demo

Javascript表单验证器与数学CAPTCHA冲突

1 个答案: