Question

我正在尝试使用Jquery为proyect开发验证脚本，其目的是为任何提交的表单使用验证脚本，因此表单ID会有所不同，也会形成元素和表单操作或方法。因此我编写了以下脚本，但是当第一个字段通过验证并且它仍然提交表单时，它无法处理第2步。

$(document).on('submit', 'form', function (e) {
    var form_Submited = $(this).attr("name");
    var form_Action = $(this).attr("action");
    var form_Information = $(this).serialize();
    var form_Elements = $(this)[0].elements;
    var i = 0;

    e.preventDefault();

    function Validation(){
        for (i; i < form_Elements.length; i++) {
            if (form_Elements[i].type === "text" && form_Elements[i].value === " " || form_Elements[i].value === null || form_Elements[i].value === 0 || form_Elements[i].value.length < 1) {
                console.log(form_Elements[i].name + ": " + form_Elements[i].value.length);
                return false;            
            }
            else if (form_Elements[i].type === "password" && form_Elements[i].value === " " || form_Elements[i].value === null || form_Elements[i].value === 0 || form_Elements[i].value.length < 1) {
                console.log(form_Elements[i].name + ": " + form_Elements[i].value.length);
                return false;            
            }
            else{
                return true;
            }
        }
    }

    if(Validation() === true){
            $.ajax({
                url: form_Action,
                data: form_Information,
                type: "GET",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (propName, val) {
                        $("#post-wrapper").append("<table><tr>");
                        $("#post-wrapper").append("<td>");
                        $("#post-wrapper").append(propName + ": " + val);
                        $("#post-wrapper").append("</td>");
                        $("#post-wrapper").append("</tr></table>");
                    });
                },
                error: function () {
                    console.log('Cannot retrieve data.');
                }
            });
    }   
});

希望能够理解它:(

此致

-G。

Answer 1

由于您的Validation（）函数，这种情况正在发生。在for循环中，在第一次迭代期间，它会检查第一个字段的有效性，如果有效则返回true。这是不正确的，这就是为什么如果第一个字段有效则表单提交。只有在for循环完成后才能返回true

另请注意，在if和else if条件中，您需要将or（||）部分放入＆＃39;（＆＃39;＆＃39;）＆＃39;。＆安培;＆安培;运算符的优先级高于或（||）

修改后的代码（删除else条件并将return返回true，将loop + parantheses添加到if和else if条件）：

$(document).on('submit', 'form', function (e) {
var form_Submited = $(this).attr("name");
var form_Action = $(this).attr("action");
var form_Information = $(this).serialize();
var form_Elements = $(this)[0].elements;
var i = 0;

e.preventDefault();


function Validation(){
    var valid = true;
    for (var i=0; i < form_Elements.length; i++) {
        if (form_Elements[i].type === "text" && (form_Elements[i].value === " " || form_Elements[i].value === null || form_Elements[i].value === 0 || form_Elements[i].value.length < 1)) {
            console.log(form_Elements[i].name + ": " + form_Elements[i].value.length);
            return false;          
        }
        else if (form_Elements[i].type === "password" && (form_Elements[i].value === " " || form_Elements[i].value === null || form_Elements[i].value === 0 || form_Elements[i].value.length < 1)) {
            console.log(form_Elements[i].name + ": " + form_Elements[i].value.length);
            return false;            
        }
    }
    return true;
}

if(Validation() === true){

    $.ajax({
            url: form_Action,
            data: form_Information,
            type: "GET",
            dataType: "json",
            success: function (data) {
                $.each(data, function (propName, val) {
                    $("#post-wrapper").append("<table><tr>");
                    $("#post-wrapper").append("<td>");
                    $("#post-wrapper").append(propName + ": " + val);
                    $("#post-wrapper").append("</td>");
                    $("#post-wrapper").append("</tr></table>");
                });
            },
            error: function () {
                console.log('Cannot retrieve data.');
            }
        });


}

});

表单子项的Jquery验证

1 个答案: