Question

I’m super new to this language. I have the ability to check for the label sting but I want to make sure that the input field next to it has at least 6 digits (numerical if possible)

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

Markup:

<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

If at all possible, find an easy way to distinguish the fields you need to validate, like Tim Bolton suggested with ID attributes on the elements, or perhaps by CSS Classes like below (i.e., the “needs6” class):

<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>

Then your jQuery selector becomes much simpler (i.e., $("input.needs6")).

Once you have your inputs selected, there are many ways to validate them.
Personally, I would use the following method:

$(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.
    });
});

If you want to see this in action, pop it into http://jsfiddle.net/ and test it, although you may want to combine this with some sample CSS classes to see it working. Samples below.

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

Hope this helps,

Pete

Addendum:

Do you mean spaces…

<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>

Please clarify.

---

Certainly!

Simply change the input loop function to any portion of the following…

$("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');
    }
});