jquery - 验证在叠加层中不起作用

Question

当表单位于主容器或正文容器中时，此验证有效并且表单正在提交..如果我将表单放入 CSS 覆盖验证不起作用并且表单未提交。

请查看此演示：http ://www.edigitaldreams.com/testing/

请单击联系框并查看表格..不工作...但是如果我将其放在主页下，则相同的表格它可以正常工作...任何人都可以帮助我...

Answer 1

我不明白为什么你的 Jquery 验证不能在覆盖中工作。我有一个解决方案供您在这里使用简单的 Jquery 验证。验证两个字段不需要在这里添加一个 JS。

HTML:-

 <label id="error_email"></label>
    <label id="error_message"></label>
    <form method="post" action="" id="contact_form" name="contact_form">
        <div class="clr">
            <div class="clr">
                <input type="text" placeholder="Name" value="" name="name" class="">
                <input type="text" placeholder="Email" value="" name="email" id="email" class="">
            </div>
            <div class="clr">
                <textarea placeholder="Message" id="message" rows="" cols="" name="message" style="width: 591px; height: 79px;" class="valid"></textarea>
                <div id="send">
                    <div class="send_button">   <span class="entypo mail"><i></i></span>
 <a href="javascript:void(0)" id="send">Send</a>

                    </div>
                </div>
            </div>
        </div>
    </form>

jQuery :-

 $(document).ready(function () {
    $('#send').click(function () {
        $("[id^='error_']").removeClass('error');
        $("[id^='error_']").html('');
        var email = $('#email').val();
        var message = $('#message').val();
        var validate_flag = 0;
        var pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i

        if (email == '') {
            $('#error_email').addClass('error');
            $('#error_email').html('Please enter email.');
            validate_flag = 1;
        } else {
            if (!pattern.test(email)) {
                $('#error_email').addClass('error');
                $('#error_email').html('Please enter valid email.');
                validate_flag = 1;
            } 
        }

        if (message == '') {
            $('#error_message').addClass('error');
            $('#error_message').html('Please enter message content.');
            validate_flag = 1;
        }
        if (validate_flag == 0) {
                  $('#contact_form').submit();
        }
    });
});

CSS：-

.error{color :red;}

现场演示：http: //jsfiddle.net/roopendra/3ccHG/19/