jQuery形式的BASIC驗證問題

Question

我試圖通過以下方式驗證表單：如果輸入字段中沒有文本，則彈出錯誤圖標...，如果輸入中有任何內容，則彈出成功圖標。 沒有使用真正的驗證方法。 您可以在此處查看表格。

如您所見，當您在第一個字段中鍵入某些內容並按Tab鍵時，該圖標會正確彈出，但在第一個字段之后的任何字段上將無法使用。 這是我的jQuery：

<script type="text/javascript">
        $(function(){
        var field = document.getElementById('myFormField');
        var icon = document.getElementById('myIcon');

        field.onchange = function(){
            icon.src = this.value ? 'success.png' : 'fail.png';
        };
        });
</script>

我不知道如何在所有輸入字段上執行此操作，但是我確定這是一個簡單的解決方法。 我的HTML設置如下：

<input type="text" class="name" name="name" tabindex="1" id="myFormField"  /><img id="myIcon" />

id myFormfield觸發圖標，而類“ name”觸發單擊背景。 我以為我應該堅持上課，並嘗試將其用作此解決方案的一部分。 有任何想法嗎？

Answer 1

您並沒有真正使用jQuery的功能。 嘗試這樣的事情：

$(function(){
    $(':text,:textarea').bind('change, blur',function(){
        $(this).next('img').attr('src',this.value ? 'success.png' : 'fail.png');
    });
});

Answer 2

您似乎剛開始使用jQuery。 好了，一旦您克服了學習曲線的前幾步，就准備好動腦筋！ jQuery最強大的功能之一就是能夠使用CSS選擇器選擇文檔中的元素。

allinputs = $("input"); // Selects all input elements in your DOM
allrequiredinputs = $("input.required"); //Selects all input elements with a class of "required" in your DOM
allrequireds = $(".required"); //Selects all elements regardless of the tag name that have a class of "required"

此主題中還有其他答案可以很好地回答您的問題，因此在這里我不會嘗試重復。 但是，我確實有一個建議可能對您更好。 為什么不使用表單狀態更改時將不同的圖像加載到DOM中的原因，為什么不使用狀態為“好”，“不好”和“空白”的sprite並在輸入字段更改時僅更新驗證元素的類。 這樣，驗證元素的所有可能狀態都會預先加載，因此反饋是即時的，而不是在一秒鍾后才下載圖像。

要了解有關精靈的更多信息，請閱讀以下內容：

• http://css-tricks.com/css-sprites/
• http://www.alistapart.com/articles/sprites/

然后，您可以執行以下操作：

// CSS

.validation {
display: block;
float: left;
width: 10px;
height: 10px;
}
.validation.blank {
background: none;
}
.validation.good {
background: url(mysprite.gif) 0px 0px;
}
.validation.nogood {
background: url(mysprite.gif) 0px 10px;
}

// HTML

<form id="myForm" ... >
    <div id="contactform_namerow">
        <label for="name">Name</label><input type="text" id="name" name="name" />
        <div class="validation"></div>
    </div>
</form>

// jQuery

$(function(){
    $('#myform input, #myform textarea').bind('change',function(){
        if($(this).val == ""){
            $(this).siblings(".validation").addClass("nogood").removeClass("good");
        } else {
            $(this).siblings(".validation").addClass("good").removeClass("nogood");
        }
    });
});

您可以通過將表示每個字段應如何在每個輸入元素上進行驗證的類名進一步優化。 這樣，您可以編寫一些代碼來驗證電子郵件地址，方法是設置<input type="text" id="myemail" name="email" class="email">然后選擇$('input.email')...來選擇jQuery中的所有元素$('input.email')...另外，我確定某個地方有一個toggleClass函數，但是我懶得查找它。

但是...關於jQuery的最大優點是可用的插件數量龐大。 這是我個人的最愛： http : //bassistance.de/jquery-plugins/jquery-plugin-validation/

一旦您了解了如何正確使用該插件，我相信您會發現它可以完成您想要的所有操作！

希望這會有所幫助，並祝你好運！

伊恩

Answer 3

如果您使用的是jQuery，最簡單的方法是：

$('input').change( function() {
  icon.src = $(this).val() ? 'success.png' : 'fail.png';
});

您可能希望將$('input')替換為更具體的選擇器，例如$('input[type="text"]') 。

Answer 4

好吧，您正在使用jquery，但沒有使用jquery。 你可能應該有類似

$("input").bind('blur', function(){
    if ($(this).val() == ''){
        $(this).siblings('.icon').attr('src', 'fail.png');
    }
    else{
         $(this).siblings('.icon').attr('src', 'success.png');
    }
}

把它放在你的$（function（）{}）里面； 塊。

它的作用是檢查輸入失去焦點時文本是否為空白，然后將其設置為同級（具有class ='icon'的成功或失敗。