jQuery.validate不通过ajax使用post

时间:2014-06-05 16:59:45

标签: php jquery forms

我有点困惑。我构建了简单的表单:

<form id="simple-contact">
<input type="text" id="client-name" name="clientname" class="textF" placeholder="Imię i Nazwisko*"/>
<input type="text" id="client-mail" name="clientmail" class="emailF" placeholder="E-mail*"/>
<input type="text" id="client-phone" name="clientphone" class="textF" placeholder="Nr telefonu"/>
<textarea id="client-massege" name="clientmassage" class="textareaF" placeholder="Wpisz wiadomość"></textarea>
<input type="submit" id="client-wysylka" name="clientwysylka" value="Wyślij" class="btnF"/>
</form>

我使用jQuery验证插件,并希望通过ajax提交表单。所以我写了这部分代码:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.validate.min.js"></script>    
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/additional-methods.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#simple-contact').validate({
     onfocusout: function (element) {
     $(element).valid();
     },
      rules: {
   clientname: "required",  
   clientmail: {                
      required: true,
      email: true
    },
      clientphone: {
      required: true,
      matches: "[0-9]",
      minlength:9,
      maxlength:9
    },
    clientmassage: {
          required: true
    }

},
    submitHandler: function(form) {
        request = $.ajax({
            type: "POST",
            cache: false,
            url: "http://www.wytworniaprojektu.eu/formularze/form-simple-wrapp-send.php",
            data: $(form).serialize(),
            timeout: 3000
            success: function() {alert('Done');},
            error: function() {alert('Error');}
    });

    return false;
    },
    messages: {
    clientname: "Podaj Imię i Nazwisko",
    clientmail: {
      required: 'Pole e-mail jest wymagane',
      email: 'To nie jest prawidłowy adres e-mail'
    },
    clientphone: {
      required: 'Musisz podać nr telefonu',
      matches: 'Numer musi zawierać 9 cyfr'
    },
    clientmassage: 'Wpisz wiadomość',
    },
    errorPlacement: function(error, element) {
    if(element.is(":radio") || element.is(":checkbox")) {
    error.appendTo(element.parent());
    }
    else {
    error.insertAfter(element);
    }
    },
   });
   });

我也试过这个解决方案https://stackoverflow.com/a/17627502/2801980

但仍然无法正常工作,我的意思是表格不发送(猜测不要从ajax网址中获取代码(操作路径)。我无法看到任何提醒和提交将我重定向到同一页面。

见行动http://www.wytworniaprojektu.eu/#contact-form

1 个答案:

答案 0 :(得分:0)

这里发生的事情是你的ajax工作。它发送请求并接收响应。我猜你现在设置它的方式是当你收到重定向的任何响应时。问题是响应是错误的。

你可能应该向服务器端发出ajax请求,服务器端应该执行某项任务,并根据该任务将响应返回给javascript。

因此,在服务器端,您可以将信息保存到数据库中。如果一切顺利,您应该返回JSON,例如{status:1}。如果服务器端出现任何错误,您可能希望捕获它们并返回{status:0}。

现在在你的javascript中

success: function(data) { 
   if(data.status) { 
         // do the redirect 
   } else { 
         // handle error 
   }
}