0

I'm using a Bootstrap template for my web app. Now in one form I'm accepting a US Zip code value from the user, submitting the form to the desired page and showing the result.

Now I have to put validations for it as follows:

  • The value entered by user in input field "zip_code" should only be Valid US zip code. If he/she enters invalid value then the error message in red color should appear above the text field intended for entering zip code. The form should not get submit.
  • This validation should be done by using jQuery and on clicking of a map-marker icon which I made to behave like a submit button.

Following is the necessary HTML code snippet :

<div class="nav-collapse">
  <ul class="nav  pull-right navbar-fixed-bottom">
    <li><a href="#"><i class="icon-user icon-black"></i> LOGIN</a></li>
    <li><a href="#"><i class="icon-pencil icon-black"></i> REGISTER</a></li>
    <li><a href="#"><i class="icon-edit icon-black"></i> STATUS</a></li>
    <li><a href="#"><i class="icon-envelope icon-black"></i> CONTACT</a></li>
    <li><a href="#"><i class="icon-user  icon-black"></i> MY ACCOUNT</a></li>
    <li><a href="#"><i class="icon-user  icon-black"></i> SHOP DESTINATOR</a></li>
    <li>
      <form action="abc.php" class="navbar-form pull-right" id="formzip" method="post">
        <input style="width: 115px;" type="text" placeholder="Enter the zip code" name="zip_code" id="zip_code" value=""> <i class="icon-map-marker icon-black" onclick='$("#formzip").submit();'></i>
      </form>
    </li>
  </ul>
</div><!--/.nav-collapse -->

As I'm a relatively new to the Bootstrap framework can someone please help me in this regard?

Thanks for spending some of your valuable time in understanding my issue. If you need any other information regarding my issue please do let me know. Any kind of help would be greatly appreciated.

Waiting for your precious replies.

PHPLover
  • 1
  • 51
  • 158
  • 311
  • Zip code validation requires an actively-maintained database. It's easy to validate that a string is a *possible* valid zip code. The Post Office offers an API (I think you'd have to use it from the server) and so do the Google and Bing map APIs. If you use any service like that heavily it's likely you'd end up having to pay for it. – Pointy Sep 28 '14 at 13:44
  • @Pointy:For validating the US zip code I've one regex but it's wriiten in PHP how should I use it here in jQuery?function zip_code($str) { return (bool) preg_match("/^([0-9]{5})(-[0-9]{4})?$/i", $str); } – PHPLover Sep 28 '14 at 13:48
  • If you're just worried about valid form, and not actual validity (like, that 02134 is not the right zip code for a Los Angeles address), then [see this question](http://stackoverflow.com/questions/160550/zip-code-us-postal-code-validation). – Pointy Sep 28 '14 at 13:56

1 Answers1

1

Please Search first before posting a question, check this previous question it may help you

How to validate US ZIP code using jQuery Validation plugin

You can use JavaScript also,

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function IsValidZipCode(zip) {
            var isValid = /^[0-9]{5}(?:-[0-9]{4})?$/.test(zip);
            if (!isValid) {
                document.getElementById("ErrorDiv").innerHTML = "Invalid";
                return false;
            } else {
                document.getElementById("ErrorDiv").innerHTML = "";
                return true;
            }
        }
    </script>
</head>
<body>
    <form id="form1">
        <input id="txtZip" name="zip" type="text" /><div id="ErrorDiv" style="color: red"></div>
        <br />
        <input id="Button1" type="submit" value="Validate"
            onclick="return IsValidZipCode(this.form.zip.value)" />
    </form>
</body>
</html>

Thanks,

Community
  • 1
  • 1
Ahmed Mandour
  • 330
  • 1
  • 8