Question

我在表单中添加了随机数加法验证码。表单字段将单独验证。似乎发生的事情是，如果验证码是空白的（生成警报窗口并按下OK按钮），表单似乎仍然会提交。或者，如果captch答案为空，则会生成警报，但单击“确定”按钮会提交表单。

基本上，一旦验证码出现错误但所有必填字段都已验证，验证码就不会停止任何操作。

在BODY上调用随机数生成，在FORM行上调用验证。 Captcha验证在SUBMIT按钮上。

我已经寻找其他解决方案，但没有任何帮助。我也尝试生成错误消息，如答案框中的代码，但这没有帮助。我在这里稍微简化了页面，以减少表单字段和文本。表格位置和电子邮件也已删除。

非常感谢你的帮助。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="resource-type" content="document">
</head>
<!-- numbers generated for captcha -->
<body onLoad="randomNums();">
<!-- validation of form fields in form statement below -->
<form action="location/formemail.bml" method="get" name="contact_form" onsubmit="return Validate()">
<input type="hidden" name="my_email" value="removed" />
<input type="hidden" name="subject" value="Reservation Request Form" /> 
<input type="hidden" name="order" value="name,email,confirm_email,Number_Of_Adults,Number_Of_Children" />
<input type="hidden" name="thankyou_url" value="thanks-for-your-inquiry.html" />
<input type=hidden name="print_blank_fields" value="0">
<input name="required" type="hidden" value="name,email,confirm_email,Number_Of_Adults,Number_Of_Children" />
 <center>
<table BORDER CELLSPACING=2 CELLPADDING=2 WIDTH="100%" >
 <tr>
<td>FIRST NAME and LAST NAME<span class="style2">*</span></td>
<td><input type="text" name="name" onKeyUp="CheckForBlank('name')" onBlur="CheckForBlank('name')" title="Enter your name!" placeholder="Full Name" onClick="select()" required /> </td>
</tr>
<tr>
<td>EMAIL ADDRESS<span class="style2">*</span></td>
<td><input type="text" name="email" onKeyUp="CheckForBlank('email')" onBlur="CheckForBlank('email')" title="Enter a valid email address!" placeholder="me@example.com" onClick="select()" required="required" /> </td>
</tr>
<tr>
<td>Confirm EMAIL ADDRESS<span class="style2">*</span></td>
<tr>
<td>NUMBER OF ADULTS<span class="style2">*</span></td>

<td><select NAME="Number_Of_Adults" onkeyup="CheckForBlank('Number_Of_Adults')" onBlur="CheckForBlank('Number_Of_Adults')" title="Enter # Adults" 0nclick="select()" required /><option VALUE="" selected><option VALUE="1-adult">ONE</option><option VALUE="2-adults">TWO</option><option VALUE="3-adults">THREE</option><option VALUE="4-adults">FOUR</option><option VALUE="5-adults">FIVE</option><option VALUE="6-adults">SIX</option></select></td>
</tr>
<tr>
<td>NUMBER OF CHILDREN<span class="style2">*</span></td>
<td><select NAME="Number_Of_Children" onkeyup="CheckForBlank('Number_Of_Children')" onBlur="CheckForBlank('Number_Of_Children')" title="Enter # Children" 0nclick="select()" required /><option VALUE="NONE" selected><option VALUE="No Children">NONE</option><option VALUE="1-child">ONE</option><option VALUE="2-children">TWO</option><option VALUE="3-children">THREE</option><option VALUE="4-children">FOUR</option><option VALUE="5-children">FIVE</option><option VALUE="6-children">SIX</option></select></td>
</tr>
</table>
<center><table WIDTH="75%">
<tr>
<td>
 <fieldset>
        <label id="error"> </label>
<!-- Here is the captcha area. Onclick tests numbers. 
I believe it's here my problem occurs, but I don't know 
how to force the addNums to reloop when there's alert -->
        <div id="test-it"><strong>Add these numbers, enter in box below, and submit</strong><div id="digit1"></div><div id="plus">+</div><div id="digit2"></div></div>
<div id="buttons"><input type="text" id="answer" />
<input type="submit" value="Answer at left? Click to Submit" onClick="addNums()"/>     <input type="reset" value="Reset Form"  /></div>
<div id="status"></div>

    </fieldset>
    </td></tr>
</table>
</center>
</form>
<script>
var CheckForBlank = function (name) {
    var x = document.forms['contact_form'].elements[name].value;
    var temp = '';
    for(i=0;i<x.length;i++){
        temp = x.replace(/  /g,' ');
        x = temp;
    }
    if(temp == ' ' || temp == '  ') temp = '';
    document.forms['contact_form'].elements[name].value = temp;

    if(temp == '') {
        document.forms['contact_form'].elements[name].focus();

        document.getElementById('contact_form'+name).innerHTML = '<strong style="color:red;">You can not leave this field blank!<\/strong>';
    } else{
        document.getElementById('contact_form'+name).innerHTML = '';
    }
}

var Validate = function () {
    if( (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(document.contact_form._email.value)))  ) {
        document.getElementById('error').innerHTML = '<strong style="color:red;">Please fill in the required fields of the form! Don\'t forget to provide a valid email address! <\/strong>';
        return false;
    }
}
</script>
<script type="text/javascript">
function addNums(){
var answer = document.getElementById("answer").value;
var digit1 = parseInt(document.getElementById("digit1").innerHTML);
var digit2 = parseInt(document.getElementById("digit2").innerHTML);
var sum = digit1 + digit2;
if(answer == ""){
    alert("Please add the numbers");
    return false;
}else if(answer != sum){
    alert("Your answer is incorrect; try again.");
    return false;
}else{
    // all good now! //
    document.getElementById("status").innerHTML = "Correct! Thank you for validating a person is submitting the form";
    document.getElementById("answer").value = "";
}

}
function randomNums(){
var rand_num1 = Math.floor(Math.random() * 32) + 1;
var rand_num2 = Math.floor(Math.random() * 10) + 1;
document.getElementById("digit1").innerHTML = rand_num1;
document.getElementById("digit2").innerHTML = rand_num2;
}
 </script>
</body>
</html>

基于加法的Captcha在一条ALERT消息后无法检查

0 个答案: