jQuery Validation Plugin - 成功验证后无法链接功能

时间:2017-08-15 20:08:02

标签: javascript jquery forms jquery-validate

所以我想做的就是这部分代码:

$(document).ready(function () { //predaj formu i automatski crtaj graf
    $('#myform').on('submit', function (e) {
      e.preventDefault();

      $.ajax({
        type: 'post',
        url: 'upit.php',
        data: $('#myform').serialize(),
        success: function () {
            var dataPoints = [];
            $.getJSON("rez.json", function(data) { //uzmi JSON za tocke grafa
                $.each(data, function(key, value){
                    dataPoints.push({x: value[0], y: parseInt(value[1])});
                });

                var chart = new CanvasJS.Chart("chartContainer",{
                    zoomEnabled: true,
                    animationEnabled: false,
                    axisY: {
                        title: "Power received"
                    },
                    axisX: {
                        title: "Distance"
                    },
                    data: [{
                        type: "line",
                        dataPoints : dataPoints,
                    }]
                });
                chart.render();
            });

            $.ajax({ //vrati rezultat
                url:"novi.json",
                success:function(result){
                    $("#disabledInput").val(result);
                }
            });        
        }
    });
});
});

执行

成功提交后,

由此部分代码验证:

$(document).ready(function () {

$('#myform').validate({ // initialize the plugin
    rules: {
        n1: {
            required: true,
            email: true
        },
        n2: {
            required: true,
            minlength: 5
        }
    },
    errorPlacement: function(error, element) {
        error.appendTo('#nameError');
    },

    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

});

我只是无法正确链接它,我知道这两个是分开的脚本所以我需要它们以某种方式链接。谢谢!

此外,我需要将ajax提交(第一个代码)代码分开,因为我想用许多其他函数调用它(播放是添加一个滑块,所以我提交它每次更改滑块等等...)但我和#39;我不确定如何

编辑:我做到了,这是答案

$(document).ready(function () {

$('#myform').validate({ // initialize the plugin
rules: {
    n1: {
        required: true,

    },
    n2: {
        required: true,

    }
},
errorPlacement: function(error, element) {
    error.appendTo('#nameError');
},

submitHandler: function (form) {


      $.ajax({
        type: 'post',
        url: 'upit.php',
        data: $('#myform').serialize(),
        success: function(){
            var dataPoints = [];
            $.getJSON("rez.json", function(data) { //uzmi JSON za tocke 
grafa
                $.each(data, function(key, value){
                    dataPoints.push({x: value[0], y: parseInt(value[1])});
                });

                var chart = new CanvasJS.Chart("chartContainer",{
                    zoomEnabled: true,
                    animationEnabled: false,
                    axisY: {
                        title: "Power received"
                    },
                    axisX: {
                        title: "Distance"
                    },
                    data: [{
                        type: "line",
                        dataPoints : dataPoints,
                    }]
                });
                chart.render();
            });


        }
    });
}
});

});

1 个答案:

答案 0 :(得分:0)

我做到了,这是答案

$(document).ready(function () {

$('#myform').validate({ // initialize the plugin
rules: {
    n1: {
        required: true,

    },
    n2: {
        required: true,

    }
},
errorPlacement: function(error, element) {
    error.appendTo('#nameError');
},

submitHandler: function (form) {


      $.ajax({
        type: 'post',
        url: 'upit.php',
        data: $('#myform').serialize(),
        success: function(){
            var dataPoints = [];
            $.getJSON("rez.json", function(data) { //uzmi JSON za tocke 
grafa
                $.each(data, function(key, value){
                    dataPoints.push({x: value[0], y: parseInt(value[1])});
                });

                var chart = new CanvasJS.Chart("chartContainer",{
                    zoomEnabled: true,
                    animationEnabled: false,
                    axisY: {
                        title: "Power received"
                    },
                    axisX: {
                        title: "Distance"
                    },
                    data: [{
                        type: "line",
                        dataPoints : dataPoints,
                    }]
                });
                chart.render();
            });


        }
    });
}
});

});