Question

我已使用Parsley.js进行表单验证。我通过JQuery提交，因此页面不会刷新。但是当我使用Javascript代码进行提交时，我注意到表单验证不再发生了。以前，当我没有使用Javascript时，表单验证已经发生。

这是我的html代码，我在这里使用了parsley.js.

<form id="contact-form" action="xxx.php" method="POST" data-parsley-validate>
                        <div class="contact-form-loader"></div>
                        <fieldset>

                            <label class="name">
                                <input type="text" id="nme" name="name" placeholder="Name:" value=""
                                       data-constraints="@Required @JustLetters" data-required="true"/>                                
                            </label>

                            <label class="email">
                                <input type="text" name="email" placeholder="Email:" value=""
                                       data-constraints="@Required @Email" data-parsley-trigger="change" data-required="true"/>
                            </label>

                            <label class="phone">
                                <input type="text" name="phone" placeholder="Phone:" value=""
                                       data-constraints="@JustNumbers" data-required="true"/>
                            </label>


                            <label class="message">
                                <textarea name="message"
                                          data-parsley-trigger="keyup" placeholder="Message :" data-parsley-minlength="15" 
                                          data-parsley-validation-threshold="10" data-required="true"
                                          data-parsley-minlength-message = "You need to enter at least a 20 character comment ! ..">
                                </textarea>
                            </label>

                            <div class="btn-wrapper">
                                <a class="btn_2 text_3 color_7" href="#" data-type="reset">Clear</a>
                               <!-- <a class="btn_2 text_3 color_7" href="#" data-type="submit">Send</a>-->
                                <input id="sub" type="submit" name="submit" class="btn_2 text_3 color_7" value="Send"/>
                             </div>
                        </fieldset>
                        <div class="modal fade response-message">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                                aria-hidden="true">&times;</button>
                                        <h4 class="modal-title">Modal title</h4>
                                    </div>
                                    <div class="modal-body">
                                        You message has been sent! We will be in touch soon.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

这是我的java脚本，

<script type="text/javascript">

    $("#sub").click(function() {        

    var url = "xxx.php";

        $.ajax({
           type: "POST",
           url: url,
           data: $("#contact-form").serialize(),
           success: function(data)
           {
               alert("Message Sent !");
           }
         });  

    return false; 
    });

</script>

这是我用来发送电子邮件的xxx.php。（这在我的服务器上有效）

<?php

            $name=$_POST['name'];
            $email=$_POST['email'];
            $phone=$_POST['phone']; 
            $message=$_POST['message'];

            $to='nirodha1500@gmail.com';
            $subject='Contact Form Message';
            $headers  = 'MIME-Version: 1.0' . "\r\n";
            $headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
            $headers .='From : '.$email."r\n".
                       'Reply-To : '.$email."r\n".
                       'X-Mailer: PHP/' . phpversion();     
            $sent=mail($to,$subject,$message,$headers);
            if(!$sent){
                echo "There are problems in sending mails  <br>";
            }else{
                echo "End mail sending";            
            }       
            echo "Sent mail";


   ?>

有没有人有想法？

Answer 1

使用ajax提交表单的正确方法是on('submit', ...)，而不是点击。

另外，请确保在parsley之后绑定提交事件。

如果您愿意，也可以使用parsley并绑定form:success：

$('#contact-form').parsley().on('form:success', ...)

JQuery表单提交不验证字段

1 个答案: