jquery form BASIC驗證問題

Question

我想驗證一個表單，如果在輸入字段中沒有文本，彈出一個錯誤圖標......並且如果有任何東西在輸入中，則會彈出一個成功圖標。沒有使用真正的驗證方法。你可以看到表格here。

正如您所看到的，當您在第一個字段中鍵入內容並按下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觸發圖標，類別「姓名」觸發上單擊背景。我想我應該堅持班級，並嘗試將其用作此解決方案的一部分。有任何想法嗎？

Answer 1

你並沒有真正使用jQuery的強大功能。嘗試是這樣的：如果你正在使用jQuery

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

Answer 2

，最簡單的方法是：

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

您不妨爲$('input[type="text"]')更具體的選擇，例如更換$('input')。

Answer 3

好吧，你正在使用jquery，但沒有使用jQuery。你或許應該有類似

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

把你的$內（函數（）{}）;塊。

它的作用是檢查，看看如果文本爲空當輸入失去焦點，然後將它的兄弟姐妹（有一類=「圖標」的成功或失敗。

Answer 4

你似乎剛剛開始那麼，一旦你瞭解了學習曲線的第一步，準備好開始思考！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" 

在這個線程中還有其他的答案可以很好地回答你的問題，所以我不會在這裏嘗試和複製它們。 wever，我確實有一個可能對你更好的建議。當表單狀態發生變化時，爲什麼不使用具有「好」，「不好」和「空白」狀態的精靈，而只是在輸入字段更改時更新驗證元素的類。通過這種方式，您的驗證元素的所有可能狀態都會預先加載，因此反饋是即時的，而不是在第二次或之後下載圖像。

要了解更多關於精靈，閱讀這些：

• 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">和選擇類似於jQuery的所有元素，去$('input.email')...另外，我確定在某處有toggleClass函數，但我懶得查找它。

但是......關於jQuery的好處是可用的插件數量很多。這是我個人的最愛：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

一旦你學會了如何正確使用插件，我相信你會發現它會做你想在這裏獲得的一切和更多！

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

Iain