如何验证ajax表单?

时间:2013-08-03 19:20:52

标签: javascript jquery jquery-plugins jquery-validate

我正在使用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来验证输入字段。 现在,我可以使用jQuery Form plugin (document).ready来验证字段。类似的东西:

$('#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

部分?它只是提交表格,因为它是&amp; jQuery formbuilder无法将输入序列化在一起。我如何在这里使用序列化插件? 我真的很难受。我不是很擅长javascript。

有人可以指导我。如果不清楚,我可以添加更多细节。我正在绞尽脑汁。还有其他方法吗?请建议。

1 个答案:

答案 0 :(得分:0)

尝试使用serialize()函数

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

这将序列化所有元素