ajax表单验证前提交方式 - ajax form validation before submit how?

我正在对服务器上的php页面进行ajax跨域请求。我通过ajax将表单从html发布到服务器上的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!');
        }
    });
});
});

如何进行验证？我试图在发送之前放入代码，但没有成功。或者可能使用submitHandler？

想法是，当用户点击提交时，验证开始，如果未能告知"插入您的电子邮件地址"。现在，当我点击提交时，它会将数据发送到服务器。我想要第一个检查输入字段。

这个表单是实际工作的，它将数据发送到服务器，但只需要弄清楚如何进行验证。在ajax调用中将验证放在哪里？

感谢

创建一个函数来验证返回true/false的表单。在$.ajax.check之前调用函数，如果return为false，则返回。。请参阅下面的示例。。。

if(!validateForm())
    return false;

首先，您实际上在使用AJAX表单吗？

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

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

在任何一种情况下，当用户跳到下一个字段时，都可以使用jQuery的blur事件来验证每个字段。您甚至可以在用户每次使用keypress按键时进行验证。

我总是在将它们输入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调用之前，使用您设置的变量创建if-else语句（如果有错误）。否则，您可以将其粘贴到原始验证中，这样您就可以继续操作了。

请在发送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/)

您也可以在Keyup上创建一个函数。

您已经在通过服务器端进行验证了，对吗？为什么不使用相同的验证规则，通过Ajax使其看起来像您的客户端呢。我有一个关于如何做到这一点的教程：

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