Question

我正在使用在jQuery中完成的在线博客表单验证，我对此文件的问题是当我重复输入代码用于其他ID时，跨度警报未显示。

$(document).ready(function() {
            <!-- Real-time Validation -->
                <!--Name can't be blank-->
                $('#contact_name').on('input', function() {
                    var input=$(this);
                    var is_name=input.val();
                    if(is_name){input.removeClass("invalid").addClass("valid");}
                    else{input.removeClass("valid").addClass("invalid");}
                });
                $('#contact_nameee').on('input', function() {
                    var input=$(this);
                    var is_named=input.val();
                    if(is_named){input.removeClass("invalid").addClass("valid");}
                    else{input.removeClass("valid").addClass("invalid");}
                });

                <!--Email must be an email -->
                $('#contact_email').on('input', function() {
                    var input=$(this);
                    var re = /^[a-zA-Z0-9.!#$%&'*+=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
                    var is_email=re.test(input.val());
                    if(is_email){input.removeClass("invalid").addClass("valid");}
                    else{input.removeClass("valid").addClass("invalid");}
                });

                <!--Website must be a website -->
                $('#contact_website').on('input', function() {
                    var input=$(this);
                    if (input.val().substring(0,4)=='www.'){input.val('http://www.'+input.val().substring(4));}
                    var re = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/;
                    var is_url=re.test(input.val());
                    if(is_url){input.removeClass("invalid").addClass("valid");}
                    else{input.removeClass("valid").addClass("invalid");}
                });

                <!--Message can't be blank -->
                $('#contact_message').keyup(function(event) {
                    var input=$(this);
                    var message=$(this).val();
                    console.log(message);
                    if(message){input.removeClass("invalid").addClass("valid");}
                    else{input.removeClass("valid").addClass("invalid");}   
                });

            <!-- After Form Submitted Validation-->
            $("#contact_submit button").click(function(event){
                var form_data=$("#contact").serializeArray();
                var error_free=true;
                for (var input in form_data){

                    var element=$("#contact_"+form_data[input]['name']);

                    var valid=element.hasClass("valid");
                    var error_element=$("span", element.parent());
                    if (!valid){

                    error_element.removeClass("error").addClass("error_show"); 
                    error_free=false;
                    }
                    else{error_element.removeClass("error_show").addClass("error");}
                }
                if (!error_free){
                    event.preventDefault(); 
                }
                else{
                    alert('No errors: Form will be submitted');
                }
            });



        });

我完成了 jsFiddle 。

请调查并帮助我。

谢谢

Answer 1

问题是该元素的name，您在名称中添加了contact_前缀，将其删除并且应该没问题

<input type="text" id="contact_nameee" name="nameee"></input>

演示：Fiddle

jQuery验证表格不起作用

1 个答案: