I need to validate a postcode input between 3030 and 3340

Question

I am making a form for customers to quickly see if the business services their area. I need the input to validate the input postcode from 3030 to 3340.

If it is true then a pop-up dialog box will appear with confirmation of service and contact triggers. If false then a dialog appears informing the customer that their area is not currently serviced by the business.

I know I haven't created the .poscode-valid or .postcode-invalid yet. I also don't want the selection arrows so a fix that removes them would be good. Thanks for any help.

// // ********************************************************************************
// // This script checks to see if the postcode matched the excepted field and returns
// // a dialog box accordingly 
// // ********************************************************************************
// this script need to evaluate the input against input numbers >=3030 && <=3340.
jQuery(document).ready(function($) {
      $('.postcode_form').validate({
        rules: {
          range: [3030, 3340]
        }
        if (range = true) {
          $('.postcode_form').addClass('.postcode_valid')
        } else {
          $('.postcode_form').addClass('.postcode_invalid')
        }
      });

body {
  margin: 0;
  padding: 0;
}
#service_area {
  background: #245353;
  background-size: cover;
  height: 100vh;
}
.service_area_container {
  max-width: 800px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.area h1 {
  text-align: center;
  font-size: 2.5em;
  text-transform: uppercase;
  margin: 0;
}
.area h5 {
  margin: 0 2em 2em 2em;
  text-align: center;
  font-size: 1em;
  letter-spacing: 0.0385em;
  font-weight: 100;
  text-transform: uppercase;
}
.area_input {
  width: 184px;
  margin: 0 auto;
}
input.your_postcode {
  width: 70px;
  margin: 0 -6px 0 0;
  padding: 14px 17px 12px 17px;
  border: none;
  letter-spacing: 0.0585em;
  z-index: 1;
}
.area_input .submit {
  padding: 14px 17px 12px 17px;
  text-transform: uppercase;
  letter-spacing: 0.0356em;
  font-weight: 100;
  z-index: 3;
  margin: 0;
  border: none;
}

<section id="service_area" class="scrolling-bg bg-3">
  <div class="service_area_container area">
    <h1>Where's the job?</h1>

    <h5>Enter your <span class="high_light">postcode</span> below to see if we <span class="high_light">service</span> the <span class="high_light">area</span></h5>

    <div class="area_input">
      <form class="postcode_form">
        <input type="number" id="your_postcode" class="your_postcode" name="postcode" placeholder="Postcode">
        <input type="submit" class="submit" value="Submit">
        <div class="loading"></div>
      </form>
    </div>
    <!-- .area_input -->
  </div>
  <!-- .service_area_container -->
</section>
<!-- #service_area -->

You can see the code I have thus far here: http://jsfiddle.net/paralellos/6fr1chqo/

Answer 1

I'll give one possibility for the "removal of the arrows" bit, though it's a bit of a kludge.

If you set the input type to be text rather than number, the arrows will disappear.

The kludgy bit is that you'll now have to do extra validation to ensure the entered data is fully numeric, something like:

rules: {
    postcode: {
        number: true,
        range: [3030, 3340]
    }
}

Answer 2

Regarding your jsFiddle...

1. It was missing jQuery itself.

2. It was missing the jQuery Validate plugin.

3. Inside the rules option, you forgot to declare the name of the field.

   rules: {
       postcode: { // <- NAME of the input
           range: [3030, 3340]
       }
   }
   

4. You forgot to properly close the DOM ready event handler function with a });

5. You broke the plugin by putting an if statement within the .validate() method. The .validate() method only accepts an object literal, this is comprised of a comma separated list of key: value pairs enclosed by braces, as defined by the plugin's author, nothing else.

6. I added a required: true to make the field mandatory.

7. Change type="number" to type="text" to remove the up/down arrows on your input element. The user will not be allowed to enter non-numeric characters because the range rule is looking for numbers and triggers an error otherwise.

Your fixed DEMO: http://jsfiddle.net/6fr1chqo/3/

---

If it is true then a pop-up dialog box will appear with confirmation of service and contact triggers. If false then a dialog appears informing the customer that their area is not currently serviced by the business.

The jQuery Validate plugin has nothing to do with pop-up messages or dialog boxes. This plugin merely inserts the text of the error message immediately after each input element. Any styling or integration of pop-ups is up to you. However, I recommend a jQuery plugin for pop-ups as it's not as simple as it may seem.

If you want a message to appear when there is not an error and the field passes validation, then you must use the success callback function.

success: function(label) {
    label.addClass("valid").text("Area Serviced")
},

To say "Area NOT serviced" instead of the generic message when the field is not valid, use the messages option...

messages: {
    postcode: {
        required: "enter a Postcode",
        range: "Area NOT serviced"
    }
},

Updated DEMO: http://jsfiddle.net/6fr1chqo/4/

A generic example that integrates the ToolTipster plugin with jQuery Validate.