Question

我正在对服务器上的php页面执行ajax跨域请求。我将表单从html通过ajax发布到我在服务器上的php页面。在客户端验证有问题。

在发送表单之前，我不知道如何在客户端进行验证。

html表单是标准表单，发布输入字段：姓名，姓氏，消息.... 我的html表单，客户端：

<script type="text/javascript">

    var output = $('.nesa');

     $(document).ready(function(){
     $("#form1").submit(function (e) {
     e.preventDefault();

    $.ajax({
        url: 'http://www.example.com/form.php',
        crossDomain: true, //set as a cross domain requests
        type: 'post',
        data: $("#form1").serialize(),
        beforeSend: function (){
        // add spinner
         $('.spinner').append('<img id="animacija" src="spinnersmall.gif" alt="Loading" />');
                   },

        success: function (data) {
            $(".nesa").html(data);
            alert("sent " + data);

        },

        error: function(){

            output.text('Message is not sent!');

        }

    });
});

});

如何验证？我尝试将代码放入beforeSend但没有成功。或者也许使用submitHandler？

想法是用户点击提交，验证开始，如果无法告诉＆＃34;插入您的电子邮件地址＆＃34;。现在，当我点击提交时，它将数据发送到服务器。我希望首先检查输入字段。

此表单实际上是将数据发送到服务器，但只需要弄清楚如何进行验证。在ajax调用中放置验证的位置？

由于

Answer 1

创建一个函数来验证返回true / false的表单。在$ .ajax之前调用函数。检查return是否为false然后返回..请参阅下面的示例...

if(!validateForm())
    return false;

Answer 2

请在发送ajax请求之前验证表单。如果没有错误，则应发送ajax请求，否则返回false。你可以这样做：

 $("#form1").submit(function (e) {
     e.preventDefault();

    // Get the Login Name value and trim it
    var name = $.trim($('#name').val());

    // Check if empty of not
    if (name === '') {
        alert('Text-field is empty.');
        return false;
    }
});

你可以看到演示版本（http://jsfiddle.net/LHZXw/1/）

您还可以在关键字上创建一个函数。

Answer 3

首先，您实际使用的是AJAX表单吗？

您解释说您通过AJAX加载表单本身，但是您也是这样发送的吗？在我看来，你试图以HTML的方式发送它。您可以在发送表单之前挂钩发送按钮的click event。但是，由于该按钮在运行时添加到页面，因此您需要将事件注册到document。

$(document).on('click', 'input[type=submit]', function() {
    // Validate form
    // Add error message on fail, and return
    // Else submit form via AJAX
});

在任何一种情况下，当用户跳转到下一个字段时，您可以使用jQuery's blur event作为替代来验证每个字段。您甚至可以在每次用户使用keypress按键时验证。

Answer 4

我总是在将它们输入AJAX调用之前验证它们。这是我的例子

$('#form_nieuwsbrief').bind('submit',function(){
    var name = $('input[name=naamNieuwsbrief]').val();
    var email = $('input[name=emailNieuwsbrief]').val();

    var proceed = true;
    if (name==""){
        $('input[name=naamNieuwsbrief]').css({'border':'2px solid red'});
        proceed = false;
        }
    if (email==""){
        $('input[name=emailNieuwsbrief]').css({'border':'2px solid red'});
        proceed = false;
        }
    if(proceed == false){
        $("#msg").append("<div class='alert alert-danger' role='alert'>U bent informatie vergeten in te vullen.</div>");    
        setTimeout(function(){
            $('.alert').fadeOut(400, function(){
                $(this).remove();
                })
            ;},10000
        );
    }

    if(proceed == true){ // make the ajax call

对于只是请求姓名和电子邮件的简报而言，这只是一个快速的通讯。但原则是一样的。在您进行ajax调用之前，如果某些内容为false，则使用您设置的变量创建if else语句。否则你坚持原始验证，因此你可以继续。

Answer 5

您是否已通过服务器端验证正确？为什么不使用相同的验证规则来显示客户端 - 通过Ajax。我有一个如何做到这一点的教程：

http://michaelsoriano.com/how-to-ajax-validate-forms/

提交前ajax表单验证如何？

5 个答案: