Question

我正在为客户制作一份表格，以便快速查看该业务是否为其所在地区提供服务。我需要输入来验证输入邮政编码从3030到3340.

如果为true，则会出现一个弹出对话框，其中包含服务和联系人触发器的确认。如果为false，则会出现一个对话框，通知客户他们的区域当前没有由业务部门提供服务。

我知道我还没有创建.poscode-valid或.postcode-invalid。我也不想要选择箭头，所以修复它会很好。谢谢你的帮助。

＆＃13;

// // ********************************************************************************
// // 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')
        }
      });

＆＃13;

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;
}

＆＃13;

<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 -->

＆＃13;

您可以在此处查看我目前的代码：http://jsfiddle.net/paralellos/6fr1chqo/

Answer 1

我会给“删除箭头”一点一个的可能性，虽然它有点像kludge。

如果您将输入类型设置为text而不是number，则箭头将消失。

kludgy位是你现在必须进行额外的验证，以确保输入的数据是完全数字的，例如：

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

Answer 2

关于your jsFiddle ...

它缺少jQuery本身。
缺少jQuery Validate插件。

在rules选项中，您忘记声明该字段的name。

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

您忘记使用});正确关闭DOM就绪事件处理函数
您通过在if方法中添加.validate()语句来破坏插件。 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，别的。
我添加了required: true以强制显示该字段。
将type="number"更改为type="text"以删除input元素上的向上/向下箭头。不允许用户输入非数字字符，因为range规则正在查找数字，否则会触发错误。

您的固定演示：http://jsfiddle.net/6fr1chqo/3/

如果为true，则会出现一个弹出对话框，其中包含服务和联系人触发器的确认。如果为false，则会出现一个对话框，通知客户他们的区域当前没有由业务部门提供服务。

jQuery Validate插件与弹出消息或对话框无关。此插件仅在每个输入元素后立即插入错误消息的文本。弹出窗口的任何样式或集成都取决于您。但是，我建议使用弹出窗口的jQuery插件，因为它不像看起来那么简单。

如果您希望在 not 错误并且字段通过验证时显示消息，则必须使用success回调函数。

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

说＆＃34;区域没有服务＆＃34;当字段无效时，请使用messages选项...

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

更新了DEMO：http://jsfiddle.net/6fr1chqo/4/

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

我需要验证3030和3340之间的邮政编码输入

2 个答案: