Match input field with pattern

Question

Im using a java script method to check if fields are valid so that the form can continue. This works fine until it gets to the post code because that has to be a specific pattern .

Is there anyway to check if the value of the field matches the pattern and then allow the form to continue.

As you can see , its set to only let the form progress if the lengths are greater than 0 , which is not good for the form , but worse for the postcode part.

Javascript:

function processPhase2(){
houseN = _("Hnumber").value;
lineone = _("Caddress1").value;
linetwo = _("Caddress2").value;
cityC = _("Ccity").value;
countyC = _("Ccounty").value;
postalcodeC = _("Cpostalcode").value;
if(houseN.length > 0 && lineone.length > 0 && cityC.length > 0 && countyC.length > 0 && postalcodeC.length > 0){
    _("phase2").style.display = "none";
    _("phase3").style.display = "block";
    _("progressBar").value = 66;
    _("status").innerHTML = "Phase 3 of 3";
} else {

}

}

Input field:

    <label for="postalcode">Postal Code</label>
<input type="text" name="Cpostalcode" id="Cpostalcode" size="20" required pattern="[A-Za-z]{1,2}[0-9Rr][0-9A-Za-z]? [0-9][ABD-HJLNP-UW-Zabd-hjlnp-uw-z]{2}" placeholder="eg: W1C 8LT" title="Must match pattern">

By "postcode" do you mean `postalCode` or are you actually talking to something that happens after the submit (post-code)? — Casey Falk, Aug 07 '14 at 14:04
Also, your code isn't using the `pattern` currently. Grab it with `getAttribute` and apply it to a `new RegExp(pattern)`. Then, you can just use the RegExp `test` method. — Casey Falk, Aug 07 '14 at 14:05
i mean Cpostalcode - This is the input field. how would i apply it to a new pattern . I dont really know javascript that well — Jamie Adamas, Aug 07 '14 at 14:15

score 2 · Accepted Answer · edited May 23 '17 at 10:29

2

Grab the pattern with getAttribute and apply it to a new RegExp(pattern). Then, you can just use the RegExp test method.

var elem = document.getElementById("Cpostalcode");

var pattern = elem.getAttribute("pattern");
var re = new RegExp(pattern);
if (re.test(elem.value)) {
    // Pattern matches!
} else {
    // Pattern does NOT match.
}

JSFiddle

Note: You should add the start (^) and end ($) characters to your pattern or else it will test for substrings rather test than the entire string. You could do this with var re = new RegExp("^"+pattern+"$") or in the pattern attribute itself. (More on that...)

edited May 23 '17 at 10:29

Community

1
1

answered Aug 07 '14 at 14:15

Casey Falk

2,617
1
18
29

I assume that this would be separate to the original java script , so what would i put in the if statement in the original java script – Jamie Adamas Aug 07 '14 at 14:20
Yep -- this is the few lines you'd need to validate at any given time. You could throw this in your function wherever you'd like (eg: in your `if` statement). – Casey Falk Aug 07 '14 at 14:22
It looks like you're using Underscore as well, so you could probably shorten this a bit; this is the "pure JavaScript" version since I haven't played with Underscore yet. ;) – Casey Falk Aug 07 '14 at 14:23
1

could i do this , if its true , it sets a variable to 1 or false to 0 . then in the if statement just test to see if that variable is true or false. – Jamie Adamas Aug 07 '14 at 14:35
also i get cannot read property getAttribute of null in chrome – Jamie Adamas Aug 07 '14 at 14:36
Yuppers to your first comment. You could also just set `var valid = re.test(...)`. And interesting, did you transfer the code correctly? Check out the JSFiddle. I'm also in chrome. – Casey Falk Aug 07 '14 at 14:41
yh i copied it from the jsfiddle ,but still get it . Would a jsfiddle of the page im working on help – Jamie Adamas Aug 07 '14 at 14:45
Yup! Sounds like it can't find the `id` of the element. – Casey Falk Aug 07 '14 at 14:46
it kind of works - it dosent allow me to move onto the next part still - http://jsfiddle.net/oxhey/L11pmbLm/ – Jamie Adamas Aug 07 '14 at 14:49
Oh! You want to check against the pattern *every time* you validate; right now you are only checking when the page loads (which doesn't actually matter). Throw all of the postal-code validation stuff into your `processPhase2` function. Make sense? – Casey Falk Aug 07 '14 at 14:50
just seen that , its better but when i enter a postcode that should be valid , it still says pattern dosent match and dosent allow it to go forward – Jamie Adamas Aug 07 '14 at 14:55
Are you sure the pattern attribute is correct, then? Try throwing it in http://regexpal.com to check – Casey Falk Aug 07 '14 at 14:55
Oh! It should be `.value` and not `.val` -- typo on my part. My apologies! answer updated. – Casey Falk Aug 07 '14 at 14:58
the test data highlited yellow , so i guess its correct – Jamie Adamas Aug 07 '14 at 14:58
No prob. Regex is a very useful tool to know. : ) – Casey Falk Aug 07 '14 at 15:02

Match input field with pattern

1 Answers1