jQUERY單獨添加和刪除類

我已經創建了一個表格click here to view。該表格由一個基本驗證功能，一個字符檢查和驗證號碼字段組成。一旦驗證檢查它增加了兩種類valid（綠色）或invalid（紅色）jQUERY單獨添加和刪除類

在「可被視爲在我的演示」的那一刻，當用戶填寫輸入我的驗證檢查激活所有輸入字段，而不是一次一個。

代碼片斷

var validInput = function(fieldName) { 
    $(fieldName).css({ 
     "background-color": "rgba(229,254,205)" 
    }); 
}; 

var inValidInput = function(fieldName) { 
    $(fieldName).css({ 
     "background-color": "rgba(229,254,205)" 
    }) 
}; 

// VALIDATOR FUNCTION FOR CHARACTERS 
$('.characters').focusout(function() { 
    var letters = /^[a-zA-Z\s]+$/; 
    if ($(this).val().match(letters)) { 
     validInput('.characters'); 
     $('.valid-checked').addClass("checked").css("color", "rgb(36,199,90)"); 
     $('.invalid-checked').removeClass("invalid"); 
    } else { 
     $('.invalid-checked').addClass("invalid").css("color", "rgba(255, 0, 0, 0.92)"); 
     $('.valid-checked').removeClass("checked"); 
    } 
});

來源

2016-03-09 NewBoy

你一次沒有處理過一個元素..你正在使用類選擇器和所有的玩.. –

所以你想在我接觸特定的輸入紅綠色？ –

他指出幾個錯誤從你們，

1）validInput('.characters');不驗證所有的類.characters驗證僅此輸入觸發事件的輸入。所以它必須是validInput(this);，將元素傳遞給函數。

2) $('.valid-checked').addClass("checked").css("color", "rgb(36,199,90)"); 
      $('.invalid-checked').removeClass("invalid");

這裏不要更改所有有效和無效圖標的CSS。將更改應用於<div class="protect-field planner-form">中僅包含此輸入的圖標。因此，從輸入元素中跟蹤此包裝div，然後追溯到圖標並僅更改它們。

var validInput = function(fieldName) { 
    $(fieldName).css({ 
     "background-color": "rgba(229,254,205)" 
    }); 
}; 

var inValidInput = function(fieldName) { 
    $(fieldName).css({ 
     "background-color": "rgba(229,254,205)" 
    }) 
}; 

// VALIDATOR FUNCTION FOR CHARACTERS 
$('.characters').focusout(function() { 
    var letters = /^[a-zA-Z\s]+$/; 
    var $inputWrapper = $(this).closest('.planner-form'); //get the wrapper of the input 
    if ($(this).val().match(letters)) { 
     validInput(this); //pass this input element to validate 

     // Trace down the appropriate icons and change. 
     $inputWrapper.find('.valid-checked').addClass("checked").css("color", "rgb(36,199,90)"); 
     $inputWrapper.find('.invalid-checked').removeClass("invalid"); 
    } else { 
     $inputWrapper.find('.invalid-checked').addClass("invalid").css("color", "rgba(255, 0, 0, 0.92)"); 
     $inputWrapper.find('.valid-checked').removeClass("checked"); 
    } 
});

來源

2016-03-09 11:26:37

必須在調用ValidInput的功能使用$（本）。另外，您需要在$（this）上使用.siblings方法，而不是使用$（'。valid-checked'）等等。

來源

2016-03-09 11:23:46

沒有給你整個解決方案因爲自己的工作而感到高興:) –

新增CSS

.checked { 
    display: inline; 
} 
.invalid { 
    display: inline; 
}

使用this。

validInput(this);//instead the class referance.

然後使用closest()更改顯示隱藏圖標的代碼。

$(this).closest('.protect-field').find('.valid-checked');

DEMO

來源

2016-03-09 11:32:04 RRK

你有太多的代碼，過於複雜的HTML ..

http://codepen.io/anon/pen/yOOPgW

$(document).ready(function(){ 
    $('#validateForm input').focusout(function(){ 
    if($(this).hasClass('characters')) 
     { 
      if($(this).val() != 'a'){ 
      $(this).next('.checker').css("background-color", "red").addClass('invalid'); 
      } //change this 
     } 
     else 
     { 
      if($(this).val() != 12345){ 
      $(this).next('.checker').css("background-color", "red").addClass('invalid'); 
      } 
     } 
    }); 
});

顯然不打算做這一切爲雅，但多數民衆贊成的總體思路是什麼你需要。

來源

2016-03-09 11:34:00

從我能看到你的問題是你的數字驗證功能失敗。每個文本框都是單獨評估的。這應該可以解決您的驗證：

$('.numbers').focusout(function() { 
    var numbers = /^[-+]?\d+$/; 
    if ($(this).val().match(numbers)) { 
     validInput('.numbers'); 
     $('.valid-checked').addClass("checked").css("color", "rgb(36,199,90)"); 
     $('.invalid-checked').removeClass("invalid"); 
    } else { 
     $('.invalid-checked').addClass("invalid").css("color", "rgba(255, 0, 0, 0.92)"); 
     $('.valid-checked').removeClass("checked"); 
    } 
});

的另一個問題是，你的第一個孩子的名字文本框使用數字類實際上應該是你的角色類。

來源

2016-03-09 11:35:56

jQUERY單獨添加和刪除類

回答

相關問題