Solved

Below Regex is not firing when using with jQuery 1.9.1

Posted on 2014-03-31
9
299 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

690 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