如何验证ajax表单？

Posted 2023-05-09

【中文标题】如何验证ajax表单？

【英文标题】：How to validate ajax form?

【发布时间】：2013-08-04 21:01:34

【问题描述】：

我正在使用jQuery FormBuilder Plugin 在我的应用中生成表单构建器。

问题是我还有另外两个输入字段需要与此一起提交。

我的表单结构如下：

<script>
    $(function() 
        $('#my-form-builder').formbuilder(
            'save_url' : 'examplesave',
            'load_url' : 'examplejson',
            'useJson' : true
        );
    );
</script>

<form id="myForm">
    <input type="text" id="fname" />
    <input type="text" id="lname" />
    <div id="my-form-builder"></div>
</form>

我已编辑 jquery.formbuilder.js 文件以附加其他两个输入字段：

// saves the serialized data to the server
            var save = function () 
                    var fname= $('#fname').val();
                    var lname= $('#lname').val();

                    if (opts.save_url) 
                        $.ajax(
                            type: "POST",
                            url: opts.save_url,
                            data: $(ul_obj).serializeFormList(
                                prepend: opts.serialize_prefix
                            ) + "&form_id=" + form_db_id + "&fname=" +fname + "&lname=" +lname,
                            success: function () 
                        );
                    
                ;

到目前为止，一切都很好。这工作得很好。 问题是我想在提交之前使用jquery Validate plugin 来验证输入字段。 现在我可以在(document).ready 上使用jQuery Form plugin 来验证字段。比如：

$('#myForm').ajaxForm(
                
                    type: "POST",
                    url: "examplesave",
                    data: ?????????????????????????????????
                    beforeSubmit : function() 
                        $("#myForm").validate(
                            rules : 
                                fname : 
                                    required : true
                                ,
                                lname : 
                                    required : true
                                
                            ,
                            messages : 
                                fname : "Please enter...",
                                lname : "Please enter..."
                            
                        );
                        return $("#myForm").valid();
                    ,
                    success : function() 
                );

但是我如何获取数据

data: $(ul_obj).serializeFormList(
                                    prepend: opts.serialize_prefix
                                ) + "&form_id=" + form_db_id + "&fname=" +fname + "&lname=" +lname

部分？它只是按原样提交表单，而 jQuery formbuilder 不会将输入序列化在一起。我如何在这里使用序列化插件？ 我真的很糟糕。我不是很擅长 javascript。

有人可以指导我吗？如果不清楚，我可以添加更多细节。我绞尽脑汁。还有另一种方法吗？请提出建议。

【参考方案1】：

尝试使用 serialize() 函数

  ...
  data:$("#myForm").serialize();

这会从元素中序列化所有你

【讨论】：

好吧，我猜你误会了。我想要一种获取数据的方法： $(ul_obj).serializeFormList( prepend: opts.serialize_prefix ) + "&form_id=" + form_db_id + "&fname=" +fname + "&lname=" +lname，在数据部分。有一个插件函数可以以自己的方式对其进行序列化。如何获得那部分？