问ajax表单在提交前如何验证？
EN

Stack Overflow用户

提问于 2014-09-27 08:19:42

回答 5查看 14.9K关注 0票数 1

我正在做ajax跨域请求到我的服务器上的php页面。我张贴表单从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？

想法是当用户单击提交时，验证开始，如果没有提示“插入您电子邮件地址”。现在，当我单击submit时，它会将数据发送到服务器。我要先检查输入字段。

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

谢谢

javascript

php

jquery

ajax

forms

回答 5

Stack Overflow用户

发布于 2014-09-27 08:30:33

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

if(!validateForm())
    return false;

票数 2

Stack Overflow用户

发布于 2014-09-27 08:28:47

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

您还可以将函数设为onKeyup。

票数 1

Stack Overflow用户

发布于 2014-09-27 08:28:57

首先，您是否真的在使用AJAX表单？

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

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