如何使用jQuery檢查文本框中的所有元素？

Question

我想寫一些驗證作爲我的頁面的一部分，確保如果文本框有一些必需的文本，它將禁用該按鈕，如果它不存在。

我有這方面的工作完全使用下面的jQuery代碼：

<script> 
$(document).on("ready", function() { 
    $('input[type="text"]').on('blur', function() { 
     var $required = $(this).next().val(); 
     var $image = $(this).parent().next().children('img'); 
     var $errors = $('img:visible').length; 
     if (($(this).val().indexOf($required) == -1) && ($(this).val() != '')) { 
      $image.show(); 
      $("#submit").prop("disabled", true); 
     } else { 
      $image.hide(); 
      //Manually subtract from error otherwise it doesnt subtract until the next focus change 
      $errors--; 
      if ($errors == 0) 
       $("#submit").prop("disabled", false); 
     } 
    }); 
}); 

</script> 

當文本框需要兩個值出現問題。它們作爲逗號分隔的字符串存儲在隱藏的輸入中。我如何檢查兩者都存在？只要他們都在那裏，他們可以以任何順序在那裏。我知道我可以使用.split（'，'）來獲取並排列和測試它們，但那是我粘在的部分。

我已經嘗試使用.inArray（）和.each（），但只是無法得到它的任何地方。

我試圖設置一個小提琴，但無法讓它工作。

下面是HTML作爲一個MVC項目的縮減版本，所以大部分是由模型等填充

HTML

<table width="100%" border="1px solid"> 
    <tr> 
     <th>Source Text</th> 
     <th>Translation</th> 
    </tr> 

    <tr> 
     <td>Some text here</td> 
     <td><input type="Text"><input type="hidden" value="Some"></td> 
     <td><img id="cross" src="../cross.png" class="jq-cross hid" alt="error" /></td> 
    </tr> 

    <tr> 
     <td>Some text here</td> 
     <td><input type="Text"><input type="hidden" value="Some,Here"></td> 
     <td><img id="cross" src="" class="jq-cross hid" alt="error" /></td> 
    </tr> 
<tr><td colspan="3"><button id="submit" type="submit">Update Translations</button> </td></tr> 
</table> 

任何幫助，您可以給我會非常感謝。希望我在這裏提供了足夠的信息。

在此先感謝

Answer 1

你可以寫循環的功能在你的逗號分隔字符串，像這樣：

function isTextInText(text, searchtext) { 
    var arr = text.split(','); 

    for(var i=0, len=arr.length; i < len; i++) { 
     if (searchtext.indexOf(arr[i]) == -1) return false; 
    } 
    return true; 
} 

console.log(isTextInText("hello","hello there")); //true 
console.log(isTextInText("hello,there","hello there")); //true 
console.log(isTextInText("hello,bye","hello there")); //false 

然後你的if邏輯可能會變成：

if (isTextInText($required,$(this).val()) 

小提琴 - http://jsfiddle.net/e7qkd/

Answer 2

只需使用的For ... in語句：

for(x in $required) 
{ 
    if($(this).val().indexOf($required[x]) !== -1) 
    { 
     // Code in case if text don't have required string 
    } 
} 

Answer 3

$(document).on("ready", function() { 
    $('input[type="text"]').on('blur', function() { 
     var $required = $(this).next().val().split(','); // split values with comma 
                 // and make array 
     var $image = $(this).parent().next().children('img'); 
     var $errors = $('img:visible').length; 
     var value = $.trim(this.value);   // get blur text field value 

     // checking value with inArray() 

     if ($.inArray(value, $required)) { 
      $image.show(); 
      $("#submit").prop("disabled", true); 
     } else { 
      $image.hide(); 
      //Manually subtract from error otherwise it doesnt subtract until the next focus change 
      $errors--; 
      if ($errors == 0) 
       $("#submit").prop("disabled", false); 
     } 
    }); 
});