Question

我似乎被困在这件作品中。我正在寻找一种清晰的循环输入空的方式。但如果所有传递都不为空，请执行ajax调用。

$("#save-material").click(function(){
    $('#material input').each(function(){
        if(!$(this).val()){
            //alert('fields are empty');
            $(this).parent('td').addClass('error');


        }else{
            $(this).parent('td').removeClass('error');
            $(this).parent('td').addClass('success');

        }//END OF ELSE
    });//END OF .EACH
        inputs = $('#material').serialize();
        //get job ID
        uri = window.location.href;
        parts = uri.split('/');
        ID = parts[5].match(/id=(.*)/);
        //make the ajax call
        $.ajax({
            type: "POST",
            url: '../../assets/php/addmaterials.php?'+ID[1],
            data: inputs,
            success: function(data){
                alert(data);
            },
            error: function(data){
                alert(data);
            }
    });//END OF AJAX
});//END OF save-material function

Answer 1

您似乎错过了检查以计算.success表格单元格。

var count = $('#material .success').length;
if (count > 5) {
    // do ajax stuff
}

你的循环有效吗？你是否加入了成功班？

Answer 2

这是我的方法。首先，我将success类添加到所有文本框中。然后，使用filter我检索空的文本框，并将它们绑定到名为a的数组。如果数组的length大于零，则表单无效。我很快就会使用error数组将a类添加到这些空字段中。希望这是有道理的。

$('input:button').click(function () {    
     $('#apply-form input').addClass('success').removeClass('error');
     var a = $('#apply-form input').filter(function (i) {
        return this.value.length == 0;
     });

    a.addClass('error');
    if (a.length) {
       alert('empty field');
    } else {
       //call ajax
       alert('valid');
    }
 });

演示：https://jsfiddle.net/erkaner/avun1d2k/2/

Answer 3

简单示例 - 只是提醒错误并中止例程。

$("#save-material").click(function(){
    var isErr = false; // <====== addition
    $('#material input').each(function(){
        if(!$(this).val()){
            isErr = true; // <====== addition
            //alert('fields are empty');
            $(this).parent('td').addClass('error');
        }else{
            $(this).parent('td').removeClass('error');
            $(this).parent('td').addClass('success');
        }//END OF ELSE
    });//END OF .EACH

    if (isErr) { // <====== addition
        alert('Please complete all fields');
        return false;
    }

    inputs = $('#material').serialize();
    //get job ID
    uri = window.location.href;
    parts = uri.split('/');
    ID = parts[5].match(/id=(.*)/);
    //make the ajax call
    $.ajax({
        type: "POST",
        url: '../../assets/php/addmaterials.php?'+ID[1],
        data: inputs,
        success: function(data){
            alert(data);
        },
        error: function(data){
            alert(data);
        }
    });//END OF AJAX
});//END OF save-material function

输入验证循环后调用ajax的最佳方法

3 个答案: