多条记录的动态表单验证

Question

我这里有一个表单验证。我需要为多个编辑记录创建动态表单验证。 如何在 for 循环中进行此操作？

这是我的脚本

<script>
jQuery(function($) {
    var validation_holder;

    $("form#register_form input[name='submit']").click(function() {

    var validation_holder = 0;

        var project         = $("form#register_form input[id='n_app_cn']").val();
        var project_regex   = /^[a-zA-Z0-9]+$/; // reg ex cost check    

        var counter         = $("form#register_form input[id='n_counter']").val();
        var counter_regex   = /^[0-9]+$/; // reg ex qty check

        /* validation start */  

        if(project == "") {
            $("span.val_project").html("This field is Required.").addClass('validate');
            validation_holder = 1;
        } else {
            if(!project_regex.test(project)){ // if invalid phone
                $("span.val_project").html("Invalid Special Characters!").addClass('validate');
                validation_holder = 1;

            } else {
                $("span.val_project").html("");
            }
        }

        if(counter == "") {
            $("span.val_counter").html("");
        } else {
            if(!counter_regex.test(counter)){ // if invalid phone
                $("span.val_counter").html("Refresh to avoid Database Error!").addClass('validate');
                validation_holder = 1;

            } else {
                $("span.val_counter").html("");
            }
        }

        if(validation_holder == 1) { // if have a field is blank, return false
            $("p.validate_msg").slideDown("fast");
            return false;
        }  validation_holder = 0; // else return true
        /* validation end */    
    }); // click end 

}); // jQuery End
</script>

我看到了这个脚本，但是如何将它与我当前的脚本混合使用？请帮忙

function validate() {
for(i = 0; i < document.form.rowcount.value; i++){
if (document.getElementById("client_id" + i).value=="") {
alert("empty");
document.getElementById("client_id" + i).focus();
return false;
}
}
}

Answer 1

尽量用$.each()点赞，

function validate() {
    var flag=true;
    $("form#register_form input[type='text']").each(function(i){
        if (!this.value) {
           alert("empty");
           this.focus();
           flag=false;
           return false;
        }
    });
    return flag;
}

称它为onclick 的submit button 喜欢，

jQuery(function ($) {
    var validation_holder;
    $("form#register_form input[name='submit']").click(function () {        
        var emptyFlag=validate();
        if(emptyFlag){
            // your remaining code for validation   
        }
    }); // click end 
}); // jQuery End

已更新，您可以添加class required, project, counter 来检查这些字段，并在您的js 中进行更改，

function validate() {
    var flag=true;
    $("form#register_form input.required").each(function(i){// use required class
        // same as above for all required fields
    });
    return flag;
}

对于project class 进行测试，

$('.project').each(function(){ // use $.each for all project class
    project = this.value;
    if (project == "") {
        // use $(this).next to show error in front of text box
        $(this).next("span.val_project")
               .html("This field is Required.").addClass('validate');
        validation_holder = 1;
    } else {
        if (!project_regex.test(project)) { // if invalid phone
            $(this).next("span.val_project").html("Invalid Special Characters!").addClass('validate');
            validation_holder = 1;
        } else {
            $(this).next("span.val_project").html("");
        }
    }
});
// Similarily you can add checks for item, counter, etc.

Answer 2

它非常简单的东西只是把你的函数放在像这样的 jQuery 调用上。

<script>
jQuery(function($) {
    var validation_holder;

    $("form#register_form input[name='submit']").click(function() {
//Put start up test thats it.
for(i = 0; i < document.form.rowcount.value; i++){
if (document.getElementById("client_id" + i).value=="") {
alert("empty");
document.getElementById("client_id" + i).focus();
return false;
}
}
    var validation_holder = 0;

        var project         = $("form#register_form input[id='n_app_cn']").val();
        var project_regex   = /^[a-zA-Z0-9]+$/; // reg ex cost check    

        var counter         = $("form#register_form input[id='n_counter']").val();
        var counter_regex   = /^[0-9]+$/; // reg ex qty check

        /* validation start */  

        if(project == "") {
            $("span.val_project").html("This field is Required.").addClass('validate');
            validation_holder = 1;
        } else {
            if(!project_regex.test(project)){ // if invalid phone
                $("span.val_project").html("Invalid Special Characters!").addClass('validate');
                validation_holder = 1;

            } else {
                $("span.val_project").html("");
            }
        }

        if(counter == "") {
            $("span.val_counter").html("");
        } else {
            if(!counter_regex.test(counter)){ // if invalid phone
                $("span.val_counter").html("Refresh to avoid Database Error!").addClass('validate');
                validation_holder = 1;

            } else {
                $("span.val_counter").html("");
            }
        }

        if(validation_holder == 1) { // if have a field is blank, return false
            $("p.validate_msg").slideDown("fast");
            return false;
        }  validation_holder = 0; // else return true
        /* validation end */    
    }); // click end 

}); // jQuery End
</script>

Answer 3

我已经在另一个帖子上发布了类似的代码。请相应地修改代码，链接为-

How to do validation in JQuery dialog box?

如果此答案正确，请将其标记为答案，以便其他人将来可以将其用作参考