【问题标题】:javascript captcha validation part return the whole form instead of proceedjavascript验证码验证部分返回整个表单而不是继续
【发布时间】:2014-01-21 15:35:34
【问题描述】:

我正在使用来自elated.com 的联系表,并尝试实现一个基本的数学验证码。但是,当我提交表单时,无论验证码是否正确,都会弹出验证码错误的错误消息,而不是提交表单。

这部分代码是我编辑的:

function submitForm() {
    var contactForm = $(this);
    if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#message').val() ) {

        $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
        contactForm.fadeOut().delay(messageDelay).fadeIn();

    } 
    // this is the part of the code I added the captcha verification.
    if(('#captcha') != captcha_c) {
        $("#captchaError").slideDown(500);
        $("#captchaError").delay(messageDelay).slideUp(500);
    } else {

            $('#sendingMessage').fadeIn();
            contactForm.fadeOut();

            $.ajax( {
            url: contactForm.attr( 'action' ) + "?ajax=true",
            type: contactForm.attr( 'method' ),
            data: contactForm.serialize(),
            success: submitFinished
        });
    }

  return false;
}

HTML 表单:

<form id="contactForm" action="processForm.php" method="post">
    <h2>Send us an email...</h2>
    <ul>
        <li>
            <label for="senderName">Your Name</label>
            <input id="senderName" maxlength="40" name="senderName" placeholder="Please type your name" required="required" type="text" />
        </li>
        <li>
            <label for="senderEmail">Your Email Address</label>
            <input id="senderEmail" maxlength="50" name="senderEmail" placeholder="Please type your email address" required="required" type="email" />
        </li>
        <li>
            <label for="message" style="padding-top: .5em;">Your Message</label>
            <textarea id="message" cols="80" maxlength="10000" name="message" placeholder="Please type your message" required="required" rows="10"></textarea>
        </li>
        <li>
            <label id="captcha" for="captcha"></label>
            <input id="captcha" name="captcha" placeholder="Enter the captcha" required="required" type="text" />
            <script type="text/javascript">
                generate_captcha('captcha');
            </script>
        </li>
    </ul>
    <div id="formButtons">
        <input id="sendMessage" name="sendMessage" type="submit" value="Send Email" />
        <input id="cancel" name="cancel" type="button" value="Cancel" />
    </div>
</form>
<div id="sendingMessage" class="statusMessage">
    <p>Sending your message. Please wait...</p>
</div>
<div id="successMessage" class="statusMessage">
    <p>Thanks for sending your message! We&#39;ll get back to you shortly.</p>
</div>
<div id="failureMessage" class="statusMessage">
    <p>There was a problem sending your message. Please try again.</p>
</div>
<div id="incompleteMessage" class="statusMessage">
    <p>Please complete all the fields in the form before sending.</p>
</div>
<div id="captchaError" class="statusMessage">
    <p>Are you sure about your calculations?</p>
</div>

如果我删除评论部分,表单正在工作并继续发送电子邮件,我的 javascript 部分哪里出错了?

这里是working live example

【问题讨论】:

    标签: javascript php jquery html forms


    【解决方案1】:

    改变这个:

    if(('#captcha') != captcha_c) {
    

    到这里:

    if($('#captcha').val() != captcha_c) {
    

    此外,您的标签的 id 与您的输入相同,因此请更改:

    <label id="captcha" for="captcha"></label>
    

    <label id="something_else" for="captcha"></label>
    

    【讨论】:

      【解决方案2】:

      您忘记了('#captcha') 之前的$ 符号 在if(('#captcha') != captcha_c)

      【讨论】:

      • 你能用 console.log 打印 $('#captcha').val() 和 captcha_c 吗?
      • 我该怎么做?我知道在 php 中我可以使用 var_dump() 但我在 javascript 中是全新的
      • if(('#captcha') != captcha_c) {上方添加console.log($('#captcha').val());console.log(captcha_c);。您会在浏览器的控制台中看到该值。
      猜你喜欢
      • 2016-02-18
      • 1970-01-01
      • 2011-09-12
      • 1970-01-01
      • 1970-01-01
      • 2017-05-17
      • 2017-09-21
      • 1970-01-01
      相关资源
      最近更新 更多