檢查標籤文本並驗證與其綁定的輸入字段至少包含x個字符

Question

我對這種語言非常陌生。我要檢查標籤刺痛的能力，但我想，以確保它旁邊的輸入字段中至少有6個數字（數字如果可能）

$(document).ready(function(){ 
    $("label:contains('6 digit')") //i get lost here 
}); 

標記：

<form> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <label>6 digit</label><input value="1" type="text" class="check"> 
    <label>6 digit</label><input value="1" type="text" class="check"> 
    <label>Test</label><input value="1" type="text" class="check"> 

    <input type="submit"> 
</form> 

Answer 1

如果可能的話，找一個簡單的方法來辨別你需要驗證的領域裏，如Tim Bolton建議用ID上的元素屬性，或者通過CSS類像下面（即「needs6」級）：

<form> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <label>6 digit</label><input value="1" type="text" class="check needs6"> 
    <label>6 digit</label><input value="1" type="text" class="check needs6"> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <input type="submit" /> 
</form> 

然後你的jQuery選擇變得簡單得多（即，$("input.needs6")）。

一旦你選擇了你的輸入，有很多方法來驗證它們。如果你想看到這個動作

$(document).ready(function() { 
    var testFor6 = function() { 
     var allHave6 = true; 
     $("input.needs6").each(function() { 
      var input = $(this); 
      var value = input.val(); 
      if (!value.match(/\d{6}/g)) { 
       allHave6 = false; 
       input.addClass('doesNotHave6'); 
      } else { 
       input.removeClass('doesNotHave6'); 
      } 
     }); 

     return allHave6; 
    }; 
    $('input[type="submit"]').click(function (e) { 
     var allHave6 = testFor6(); 
     if (!allHave6) { 
      e.preventDefault(); //Cancel event-bubbling. 
     } 
     return allHave6;  //Prevent form submission when false. 
    }); 
}); 

，彈出它爲http://jsfiddle.net/和測試它，儘管你可能想這與一些樣品的CSS類結合起來，看它的工作： 就個人而言，我會用下面的方法。下面的示例。

.needs6 {background-color: yellow;} 
.doesNotHave6 {background-color: red;} 

希望這有助於

皮特

附錄：

你的意思是......空間

<form> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <!-- here? --><label><!-- here? -->6 digit</label><!-- here? --><input value="1" type="text" class="check needs6" value="<!-- here? -->"> 
    <label>6 digit</label><input value="1" type="text" class="check needs6"> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <input type="submit" /> 
</form> 

請澄清。

---

當然可以！

簡單地改變輸入迴路功能，下面...

$("input.needs6").each(function() { 
    var input = $(this); 
    var value = input.val(); 
    //You can use this to trim. 
    var trimmedValue = value.replace(/\s\s*$/, '').replace(/^\s\s*/, ''); 
    //You can use this to find leading whitespace. 
    var hasLeadingSpaces = value.match(/^\s\s*/, ''); 
    //You can use this to find trailing whitespace. 
    var hasTrailingSpaces = value.match(/\s\s*$/, ''); 
    if (hasLeadingSpaces) { 
     //Do something 
    } 
    if (hasTrailingSpaces) { 
     //Do something 
    } 
    //Check original value 
    if (!value.match(/\d{6}/g)) { 
     allHave6 = false; 
     input.addClass('doesNotHave6'); 
    } else { 
     input.removeClass('doesNotHave6'); 
    } 
    //Check trimmed value 
    if (!trimmedValue.match(/\d{6}/g)) { 
     allHave6 = false; 
     input.addClass('doesNotHave6'); 
    } else { 
     input.removeClass('doesNotHave6'); 
    } 
}); 

Answer 2

你將要在您的label上設置for屬性。您還需要爲label的輸入設置ID以識別。這應該用適當的鉤子武裝你做你想做的事情（或者至少適當地設置）。

根據您當前的設置，請嘗試：

<script> 
    $(document).ready(function(){ 
     $('#submit').click(function(event) { 
      event.preventDefault(); 
      $('label').each(function() { 
       var len = $(this).next().length; 
       if(len < 5) { 
        alert('Too Short!'); 
       } else { $('#form').submit(); 
      }); 
     }) 
    }); 
</script> 
<form id="form"> 
    <label>Test</label><input value="asdfassd1" type="text" class="check"> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <label>6 digit</label><input value="1" type="text" class="check"> 
    <label>6 digit</label><input value="1" type="text" class="check"> 
    <label>Test</label><input value="1" type="text" class="check"> 
    <input type="submit" id="submit"> 
</form> 

Answer 3

蒂姆·波頓得到它差不多吧，雖然他正在檢查如果該值低於5，他是不是測試的位數。我會做這樣的：

function isValidForm(){ 
    var labels = $('form labels'); 
    $(labels).each(function(){ 
     var inputText = $(this).next(); 
     if($(inputText).val().length < 6 || isNaN($(inputText).val())) { 
     $(inputText).css('color', 'red'); // you can do whatever you want to show the field is not properly filled 
     return false; 
     }   
    }) 
    return true; 
} 

然後，在表單提交，所有你需要做的是：

$('form').submit(function(){ 
    if(!isValidForm()){ 
     alert('please fix the errors'); 
     return false; 
    } 
}); 

Answer 4

一個label的目的是要與表單相關元素相關聯通過id：

<label for="digits">Enter Digits</label> 
<input type="text" id="digits" /> 

爲label見文檔。鑑於所有input S的關係有一個id如果他們有一個標籤，請嘗試以下操作：

$('#inputID').each(function() { 
    if (!$(this).val().match(/^\d{6,}$/)) { 
     alert('incorrect formatting!'); 
    } 
}); 

其測試選擇的輸入針對正則表達式值的「所有數字，至少六個」 。

• jsFiddle demo

我覺得regular expressions是驗證簡單輸入的最簡潔，最簡便的方式。