jQuery .each function breaking code

Question

I have a simple form verification script that loops through my inputs, checks if the ID is in an array and if so verifies that something has been input in the box. However for some reason the .each part of the code is breaking it.

My code:

function ValForm() {
    var validate = ['name', 'addr1', 'city', 'county', 'pcode'];
    var regpcode = '/^([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)$/i';
    var fail = false;
    $('#summary-wrap input').each(function() {
        var id = $(this).attr('id');
        if($.inArray(id, validate)) {
            if(id == 'pcode' && !regpcode.test(this.value)) {
                fail = true;
            } else if(this.value.length < 2) {
                fail = true;
            }
        }
    });
    if(fail) {
        alert('Please complete all required fields before continuing.');
        $(this).focus();
        return false;
    }
    return true;
}

If I put in invalid data, the form still submits. Even if I set fail = true, or turn all the returns to false, the form still submits. Here is my form:

    <form name="delivery" action="knee-icepack.php" method="post" onsubmit="return ValForm();">
            <label for="name">Name <span class="req">*</span>:</label><input type="text" name="name" id="name" required="required" />
            <br clear="all" />
            <label for="addr1">Address Line 1 <span class="req">*</span>:</label><input type="text" name="addr1" id="addr1" required="required" />
            <br clear="all" />
            <label for="addr2">Address Line 2:</label><input type="text" name="addr2" id="addr2" />
            <br clear="all" />
            <label for="city">Town / City <span class="req">*</span>:</label><input type="text" name="city" id="city" required="required" />
            <br clear="all" />
            <label for="county">County <span class="req">*</span>:</label><input type="text" name="county" id="county" required="required" />
            <br clear="all" />
            <label for="pcode">Post Code <span class="req">*</span>:</label><input type="text" name="pcode" id="pcode" required="required" />
            <br clear="all" />
            <input type="submit" id="submit" value="Proceed to Payment" />
            <input type="hidden" name="deliveryDetailsSubmitted" value="1" />
            <img src="images/paypal.jpg" align="right" />
            <br clear="all" />
            <span class="small"><span class="req">*</span> required field.</span>
        </form>

However, if I remove the .each loop from the ValForm function, it stops the form from submitting when I set fail = true. I can have no code inside the loop, and it will still not work. What is going on? This has been driving me crazy.

Learn how to use browser console. It gives a lot of useful information about errors in code. For instance, in this case Chrome has Uncaught TypeError: Object /^([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)$/i has no method 'test' in console when I run your code. — Viktor S.
– Viktor S., Commented Feb 21, 2013 at 11:16
I'm using Firebug with Firefox and it didn't come up with any errors... Though that is a pretty obvious one. In fact, I just checked in Chrome's console as well, and for me it shows no errors either. Do you have any add ons for the console? — Styphon
– Styphon, Commented Feb 21, 2013 at 11:19
Hm. Strange. Nothing special in chrome. Only possible reason I see now is that I'm using dev branch of chrome. — Viktor S.
– Viktor S., Commented Feb 21, 2013 at 11:32

Viktor S. · Accepted Answer · 2013-02-21 11:13:53Z

1

Your regexp definition is wrong. Currently that is just a string. Instead of:

var regpcode = '/^([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)$/i';

you should have (using regexp literal, no wrapping ' characters)

var regpcode = /^([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)$/i;

or (calling a constructor of regexp object)

var regpcode =  new RegExp('/^([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)$/i');

More details here

Currently your code fails on this: !regpcode.test(this.value) With your code, regpcode is a string, not a regexp. And has no method test.

answered Feb 21, 2013 at 11:13

Viktor S.

12.8k1 gold badge30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Styphon Over a year ago

Yea, that was the problem. But why would it still fail with an empty $.each test as well where the regex wasn't being used? That had me confused as hell!

Viktor S. Over a year ago

As for me, you simply made some mistake when tried it with empty each. Possibly some caching issue. Hard to say, I were unable to reproduce a problem with empty each.

Collectives™ on Stack Overflow

jQuery .each function breaking code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related