2012-04-07 82 views
1

我有以下jQuery代碼這驗證使用$.post參考父選擇「這個」 jQuery中

$("input[name='username']").blur(function() { 
    $("#usernm").html("<img src='css/assets/ajax-loader.gif' alt='Loading'/>"); 
    $.post("validate.jsp", { 
     fieldtype : $(this).attr("name"), 
     fieldval : $(this).val() 
    }, 
    function(resp) { 
     if(resp.trim()!="true") 
      $("input[name='username']").addClass("invalidvalue"); 
     else 
      $("input[name='username']").removeClass("invalidvalue"); 
     $("#usernm").html("&nbsp;"); 
    }) 
}); 

與目前我有我的表單上的每個輸入這樣的方法塊我的登記表的用戶名我正在驗證,我想要做的是,而不是使用$("input[name='username']").addClass("invalidvalue");我想使用像$(this)這樣的東西,使它指向input[name='username']也我只想保留每個輸入,我想要驗證的單一方法,以便我可以減少我的JS代碼。

如何解決這個問題?

+0

如果你有一個用戶名,它認爲會有兩個密碼。你有2個字段,如「重複密碼」?對於這種情況,我必須採納我的回答 – Neysor 2012-04-07 08:11:27

+0

@Neysor:是的,我確實有另外一個領域來確認密碼,但只有第一次輸入密碼纔會被髮送到服務器進行驗證,以確認密碼輸入,我將它與第一次密碼輸入相匹配客戶端本身。 – Kushal 2012-04-07 08:15:25

回答

1

爲了驗證所有輸入字段,你可以使用這樣的事情:

//Mapping of input elements and its 'loading' elements 
var inputMap = { 'username' : 'usernm' }; 

$("input").blur(function() { 
    var inputName = $(this).attr('name'); 
    var that = this; 

    $("#"+inputMap[inputName]).html("<img src='css/assets/ajax-loader.gif' alt='Loading'/>");  
    $.post("validate.jsp", { 
     fieldtype : inputName, 
     fieldval : $(this).val() 
    }, 
    function(resp) { 
     if(resp.trim()!="true") 
      $(that).addClass("invalidvalue"); 
     else 
      $(that).removeClass("invalidvalue"); 
     $("#"+inputMap[inputName]).html("&nbsp;"); 
    }) 
}); 
+0

確實很簡單,謝謝。 – Kushal 2012-04-07 08:02:40

+0

@庫克我已經更新了我的答案,檢查它。 – Engineer 2012-04-07 08:07:49

+0

@Engineer很好的解決方案,但我認爲基於類的選擇比ID更好,因爲您必須先構建輸入映射。並且類在HTML中製作「標記」並且不需要地圖:) – Neysor 2012-04-07 08:09:30

0

這可能與你想擁有這個功能的元素設置一個類可以輕鬆完成。

讓你輸入字段這樣的:

<input type="text" name="username" class="validate"> 
<input type="password" name="password" class="validate"> 

jQuery代碼

$(".validate").each(function(){ 
    $(this).blur(function(){ 
    var field = $(this); 
    field.addClass("loading"); //Make a class for loading behavior if possible 
    $.post(
     "validate.jsp", 
     { fieldtype:field.attr("name"), 
     fieldval :field.val() 
     }, 
     function(resp) { 
     field.removeClass("loading"); //see on top 
     if(resp.trim()!="true") { 
      field.addClass("invalidvalue"); 
     } 
     else { 
      field.removeClass("invalidvalue"); 
     } 
     } 
    }); 
}); 

如果你想有一些領域的一些特殊的變量,你可以使用HTML數據 - *類型,使像這樣:

<input name="username" class="validate" data-var="blabla"> 

然後你可以使用該值,然後與field.attr("data-var");