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/

验证无法覆盖

1 个答案: