Question

我是web dev和javascript的新手。我正在从一本书开始一个项目，并建立一个简单的网络应用程序，接受咖啡订单。我正在使用约束验证api，我坚持这一点。有一个函数可以根据正则表达式测试电子邮件字段中的输入，如果电子邮件地址具有“授权电子邮件地址”，则返回true。只要它不匹配我尝试提交表格，我得到预期的消息'****不是授权的电子邮件地址'。但是当它与模式匹配并且isCompanyEmail函数返回true时，我仍然会收到有效消息，只是另一个说'请匹配请求的格式'。有没有人知道是什么原因造成的？我包括验证码和表格代码。

验证码：

(function(window){
'use strict';
var App = window.App || {};

var Validation = {
    isCompanyEmail: function(email){
        return /.+@bignerdranch\.com$/.test(email);
    }
};

App.Validation = Validation;
window.App = App;

})(window);

formhandler代码：

(function(window){
'use strict';
 var App = window.App || {};
 var $ = window.jQuery;

function FormHandler(selector){
if (!selector) {
  throw new Error('No selector provided!');
}

this.$formElement = $(selector);
if (this.$formElement.length === 0) {
  throw new Error('Could not find element with selector ' + selector);
}
};//end constructor

FormHandler.prototype.addSubmitHandler = function(fn){
console.log('Setting submit handler for form');
this.$formElement.on('submit', function(event){
  event.preventDefault();

  var data = {};
  $(this).serializeArray().forEach(function(item){
    data[item.name] = item.value;
    console.log(item.name + ' is ' + item.value);
  });
  console.log(data);
  fn(data);
  this.reset();
  this.elements[0].focus();
 });
 };

  FormHandler.prototype.addInputHandler = function(fn){
  console.log('Setting input handler for form');
  this.$formElement.on('input', '[name="emailAddress"]', function(event){
      var emailAddress = event.target.value;
      console.log(fn(emailAddress));
      var message = '';
      if(fn(emailAddress)){
          event.target.setCustomValidity(message);
      }else{
          message = emailAddress + ' is not an authorized email address!';
          event.target.setCustomValidity(message);
      }
  });
};

App.FormHandler = FormHandler;
window.App = App;

})(window);

和html：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>coffeerun</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body class="container">
<header>
<h1>CoffeeRun</h1>
</header>
<section>
<div class="panel panel-default">
  <div class="panel-body">
    <form data-coffee-order="form">
      <div class="form-group">
        <label for="coffeeOrder">Coffee Order</label>
        <input class="form-control" name="coffee" value="" id="coffeeOrder">
      </div>
      <div class="form-group">
        <label for="emailInput">Email</label>
        <input class="form-control" type="email" name="emailAddress" value="" id="emailInput" autofocus required pattern="[a-zA-Z\s]">
      </div>
      <div class="radio">
        <label>
            <input type="radio" name="size" value="short">
            Short
          </label>
      </div>
      <div class="radio">
        <label>
            <input type="radio" name="size" value="tall" checked>
            Tall
          </label>
      </div>
      <div class="radio">
        <label>
            <input type="radio" name="size" value="grande">
            Grande
          </label>
      </div>
      <div class="form-group">
        <label for="flavorShot">Flavor Shot</label>
        <select id="flavorShot" class="form-control" name="flavor">
            <option value="">None</option>
            <option value="caramel">Caramel</option>
            <option value="almond">Almond</option>
            <option value="mocha">Mocha</option>
          </select>
      </div>
      <div class="form-group">
        <label for="strengthLevel">Caffeine Rating</label>
        <input id="strengthLevel" type="range" name="strength" value="30">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
      <button type="reset" class="btn btn-default">Reset</button>
    </form>
  </div>
</div>

<div class="panel panel-default">
    <div class="panel-body">
        <h4>Pending Orders:</h4>
        <div data-coffee-order="checklist">
        </div>
    </div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>
<script src="scripts/datastore.js" charset="utf-8"></script>
<script src="scripts/validation.js" charset="utf-8"></script>
<script src="scripts/formHandler.js" charset="utf-8"></script>
<script src="scripts/checklist.js" charset="utf-8"></script>
<script src="scripts/truck.js" charset="utf-8"></script>
<script src="scripts/main.js" charset="utf-8"></script>
</body>

</html>

为什么我会得到两个不同的setCustomValidity消息？

0 个答案: