表格未经parsleyjs验证

时间:2014-01-08 03:29:12

标签: jquery twitter-bootstrap

问题:parsleyjs没有验证我的表单。我得出这个结论是因为$('#contact-form').parsley( 'isValid' )返回true,当我希望它返回false时。例如,我在所有字段上都设置了parsley-required="true",但是当提交表单时所有字段都为空白时,它会成功提交而不是触发验证消息。

仅供参考我在这个项目中也使用Bootstrap。

这是表单HTML:

    <form method="post" id="contact-form" parsley-validate>
                        <div class="form-group">
                            <label for="contact-name">Name</label>
                            <input type="text" class="form-control" id="contact-name" placeholder="Name" parsley-required="true" name="name">
                        </div>
                        <div class="form-group">
                            <label for="contact-email">Email address</label>
                            <input type="email" class="form-control" id="contact-email" placeholder="Email" parsley-required="true" parsley-type="email" name="email">
                        </div>
                        <div class="form-group">
                            <label for="contact-message">Message</label>
                            <textarea class="form-control" id="contact-message" placeholder="Message" parsley-required="true" name="message"></textarea>
                        </div>
                        <div>
                            <input type="submit" name="submit" class="btn btn-default" value="Submit">
                            <input class="btn btn-default" type="reset" value="Reset" id="contact-reset">
                        </div>
</form>

javascript,位于</body>标记之上。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
<script src="survey/Parsley.js-1.1.18/parsley.js"></script>
<script type="text/javascript">

    $( document ).ready(function() {
        $('#contact-form').submit(function(e) {
            e.preventDefault();
            if ( $('#contact-form').parsley( 'isValid' )) {
                $.post( "mail.php", {
                    name: $('#contact-name').val(),
                    email: $('#contact-email').val(),
                    message: $('#contact-message').val()
                }).done(function( data ) {
                            $( '#contact-form' ).parsley( 'destroy' );
                            $('#contact-form')[0].reset();
                            alert( "Message successfully sent.");
                        });
                return true;
            } else return false;
        });

        $('#contact-reset').click(function () {
            $( '#contact-form' ).parsley( 'destroy' );
        });

    });

</script>

我尝试使用required代替parsley-required="true"作为输入标记的属性(针对HTML5建议)。没有不同。我也尝试过其他类型的约束,它们也不起作用。

没有给出任何错误,我很确定脚本正确加载,因为$('#contact-form').parsley( 'isValid' )返回一个值。

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

将欧芹更新为1.2.2(我在问题的代码中使用了1.1.18),现在它可以正常工作。