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 に答える