带有验证码的html联系表单提交给jquery&php .AJAX验证码验证请求，没有表单提交

Question

我是 jquery php 的新手。请帮我解决这个问题。

我有带有验证码的 html 联系表单。我的要求是。我必须在提交表单之前验证验证码。因为控制值将消失。因此用户必须使用验证码重新输入它。

我曾经发送一个 ajax 请求来检查验证码，它的工作。但表单也被提交 .form 字段值消失。这里的代码请纠正我哪里错了

Reference Page

Answer 1

<form id="RegisterUserForm" name="RegisterUserForm" action="" onsubmit="return submitform();" method="post">
    <fieldset style="border: 0;">
        <table width="100%">
            <tr>
                <td width="150">
                    <div class="celebrationContent">
                        Name:</div>
                </td>
                <td class="style1">
                    <input id="Name" type="text" name="Name" style="border-style: none; background-color: #fffcc4;
                        width: 275px;" />
                </td>
            </tr>
            <tr>
                <td>
                    <div class="celebrationContent">
                        E-mail id:</div>
                </td>
                <td class="style1">
                    <input id="email" type="text" name="email" style="border-style: none; background-color: #fffcc4;
                        width: 274px;" />
                </td>
            </tr>
            <tr>
                <td class="celebrationContent">
                    Phone Number:
                </td>
                <td class="style1">
                    <input id="phonenumber" type="text" name="phonenumber" style="border-style: none;
                        background-color: #fffcc4; width: 274px;" />
                </td>
            </tr>
            <tr>
                <td class="celebrationContent">
                    Your Celebration:
                </td>
                <td class="style1">
                    <input id="yourCelebration" type="text" name="yourCelebration" style="border-style: none;
                        background-color: #fffcc4; width: 274px; height: 33px;" />
                </td>
            </tr>
            <tr>
                <td class="celebrationContent">
                    When is it:
                </td>
                <td class="style1">
                    <input type="text" id="Whenisit" name="Whenisit" style="border-style: none; background-color: #fffcc4;
                        width: 272px;" />
                </td>
            </tr>
            <tr>
                <td class="celebrationContent">
                    Enquiry:
                </td>
                <td class="style1">
                    <input type="text" id="Enquiry" name="Enquiry" style="border-style: none; background-color: #fffcc4;
                        width: 272px; height: 70px;" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="left" class="celebrationContent">
                    Verification Code
                </td>
            </tr>
            <tr>
                <td align="left" colspan="2">
                    <table width="100%">
                        <tr>
                            <td width="32%">
                                <img src="captcha.php" alt="celebration captcha" />
                            </td>
                            <td>
                                <input type="text" id="verificationcode" name="verificationcode" style="border-style: none;
                                    background-color: #fffcc4" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" id="form_submit" />
                </td>
            </tr>
        </table>
    </fieldset>
    </form>
    <script type="text/javascript">
    function submitform() {

        if (validateCaptach()) {
            var sData = $("#RegisterUserForm").serialize();
            $.ajax({
                type: "POST",
                url: "thankyou.php",
                data: sData,
                success: function (data) {
                    if (data == "SUCCESS") {
                        alert("sucess..");
                    } else {
                        alert("some error please type again...");
                    }
                }
            });
        }

        return false;
    }

    function validateCaptach() {
        var captchaval = $("#verificationcode").val();

        $.ajax({
            type: "POST",
            url: "captchacheck.php",
            data: {
                verificationcode: captchaval
            },
            success: function (data) {
                if (data == "SUCCESS") {
                    alert("captchacheck sucess..");
                    return true;
                } else {
                    alert("The security code you typed was wrong. Please try again.");
                    return false;
                }
            }
        });
        return false;

    }

    </script>