Jquery ajax函数与表单验证

时间:2014-07-14 21:59:32

标签: javascript jquery ajax forms validation

我一直试图解决一个简单但对我来说非常难的问题。

我有一个表单,我需要将表单中的数据添加到数据库中,但需要进行表单验证。为了验证我使用parsley插件,对于一些输入字段,我使用select2插件。

我尝试以这种方式添加表单(注释在代码中):

  //try to see is zemljiste or vrsta_rada = null to do not add data to database
    var zemljiste = $("#parcele").select2("data");
    var vrsta_rada = $("#vrsta_rada").select2("data");

    //Now when I click on #dodaj I need to chech is zemljiste or vrsta_rada == null to do   not start function for adding data but DONT work
    $("#dodaj").click(function () {
        if (zemljiste == null || vrsta_rada == null) {
            alert('PLEASE fill the fields');
        } else {

//HERE if zemljiste and vrsta_rada != null start validation and this also dont work
            $('#myForm').parsley().subscribe('parsley:form:validate', function (formInstance) {
                formInstance.submitEvent.preventDefault(); //stops normal form submit
                if (formInstance.isValid() == true) { // check if form valid or not


                    zemljiste = $("#parcele").select2("data").naziv;
                    id_parcele = $("#parcele").select2("data").id;

                    vrsta_rada = $("#vrsta_rada").select2("data").text;
                    //code for ajax event here
    //Here is ajax and when I fill all fields I add data to database but here success and error into ajax dont work???
                    $.ajax({
                        url: "insertAkt.php",
                        type: "POST",
                        async: true,
                        data: {
                            naziv: $("#naziv").val(),
                            parcele: zemljiste,
                            vrsta_rada: vrsta_rada,
                            opis: $("#opis").val(),
                            pocetak: $("#pocetak").val(),
                            zavrsetak: $("#zavrsetak").val(),
                            status: $("#status").val(),
                            id_parcele: id_parcele,
                        }, //your form data to post goes here as a json object
                        dataType: "json",

                        success: function (data) {
//SO if success I add data but this code below dont work also in error dont work
                            $('#myModal').modal('hide');
                            drawVisualization();
                            console.log('YESSSSSSS');
                            console.log(data);
                        },
                        error: function (data) {
                            console.log(data);
                        }


                    });
                }
            });
        }
    });

有了这个,我有一些问题......
1.提交代码时,页面刷新,我不想这样做 2.当我填写所有字段时,我将数据添加到数据库,但也添加了以前尝试的所有错误信息。为什么呢?
3.为什么我看不到将我的成功和错误返回到console.log ???中的.ajax

看图片: enter image description here

0 个答案:

没有答案