0

我正在使用在 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。

请调查一下并帮助我。

谢谢

4

1 回答 1

0

问题是name那个元素的，你已经contact_为名称添加了前缀，删除它应该没问题

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

演示：小提琴

于 2015-02-26T05:27:43.690 回答