CODEWITHSUNDEEP
jqueryloops
Styphon
Styphon

Reputation: 10447

jQuery .each function breaking code

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.

Upvotes: 0

Views: 86

Answers (1)

Viktor S.
Viktor S.

Reputation: 12815

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.

Upvotes: 1

Related Questions