Solved

Below Regex is not firing when using with jQuery 1.9.1

Posted on 2014-03-31
9
298 Views
Last Modified: 2014-04-07
I am trying to prevent Po Box being allowed in the Shipping Address, here is my code

<script type="text/javascript">
$(document).ready(function($) {
    
	$('input[name=ShipAddress1]').each(function() {
    var pattern = new RegExp('[PO.]*\\s?B(ox)?.*\\d+', 'i');
    if ($(this).val().match(pattern)) {
        $(this).after('<span class="nopo"> We cannot deliver to PO Boxes</span>');
     }
     });
	
});
</script>

What am I missing?

Thanks

Open in new window

0
Comment
Question by:niceoneishere
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 35

Expert Comment

by:Terry Woods
ID: 39967627
Try this:
    var pattern = new RegExp('P[ .]?O[ .]?B([Oo][xX])?[^a-zA-Z]*\\d+', 'i');

Open in new window


If you have any cases that are still being missed, please post them (or a similar case) as an example so we can adjust the pattern.
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39967650
Thanks for replying, here I have made a demo

Demo in jsfiddle

Thanks and I am trying display the message as soon as the text is entered in the text box.

Appreciate it
0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 39967664
To explain the problems with the original pattern, this part of the pattern:
[PO.]*
means match any number (including zero) of the specified characters, so it would match an empty string. The remainder of the pattern required a "B" character and at least one number, which would mean these cases would match:
Beautiful Rd Apartment 3
Foo Boulevard Flat 1

Open in new window

Will have a look at the jsfiddle now.
0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
LVL 35

Expert Comment

by:Terry Woods
ID: 39967702
Note the pattern I've provided probably shouldn't have the ignore case flag used with it ('i'), although turning that off will cause it to miss cases like po box.

Anyway, the pattern I provided seems to work ok in jsfiddle. The pattern requires a number to be present before the validation will fail though. Also, the validation is run when the page is loaded, and doesn't revalidate as the user types; did you intend for it to validate as the user types in text?
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39967717
Thanks for replying so quickly,

basically what I am looking is when the textbox becomes focused or when the cursor is inside the text box I just want a simple message next to the input box saying PO Boxes are not allowed

Thanks again
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39968311
Hi There, I have modified by script to below now its firing but the form is also getting submitted when I click the submit button How to prevent that.

<script type="text/javascript">
 function cForm(){
 	var input = $('input[name=ShipAddress1]');
    var inputValue = input.val().toUpperCase();
    var poBoxIdentifiers = ['PO BOX', 'POBOX', 'GPOX'];
    for(var i = 0; i < poBoxIdentifiers.length; i++) {
      if (inputValue.indexOf(poBoxIdentifiers[i]) !== -1) {
        alert('We don\'t ship to Po Boxes');
        input.val('').focus();
    }
  } 
 }

</script>

Open in new window


and I added onsubmit event to my form like

<form id="form1" method="post" action="/payment.html" onsubmit="return cForm(this)">

Thanks

Open in new window

0
 
LVL 35

Assisted Solution

by:Terry Woods
Terry Woods earned 200 total points
ID: 39968320
Perhaps add "return false;" after the focus() call?
0
 
LVL 9

Accepted Solution

by:
Derek Jensen earned 300 total points
ID: 39983632
@Terry,

No, what he needs to do is have his function submit the form after line 11 and return false after line 9, and then change his onsubmit to...well, it should all look like this:

<script type="text/javascript">
function cForm(){
    var input = $('input[name=ShipAddress1]');
    var inputValue = input.val().toUpperCase();
    var poBoxIdentifiers = ['PO BOX', 'POBOX', 'GPOX'];
    for(var i = 0; i < poBoxIdentifiers.length; i++) {
        if (inputValue.indexOf(poBoxIdentifiers[i]) !== -1) {
           alert("We don't ship to P.O. Boxes");
           input.val('').focus();
           return false;
        }
    }
    document.form1.submit();
}
</script>

<form id="form1" name="form1" method="post" action="payment.html">
<!-- the rest of the form here -->
<input type="button" onclick="cForm(); return false;" />
</form>

Open in new window

0
 
LVL 1

Author Closing Comment

by:niceoneishere
ID: 39984046
Thanks
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question