表单验证不显示消息

Posted

技术标签:

【中文标题】表单验证不显示消息【英文标题】：Form validation not displaying message 【发布时间】：2014-06-22 11:02:20 【问题描述】：

我正在尝试让我的 javascript 验证电话号码输入并在用户输入错误信息时显示消息。我设置了另外两个输入来执行此操作，因此我复制了其中一个并将名称替换为 phoneNumber 但没有结果。请不要使用 html 替代品，我必须将其用于我的评估。

这里我只包含了用于输入电话号码的代码。 http://jsfiddle.net/29ZNV/

HTML

    <form>
        <label for="phoneNumber"><span class="textStyle">Phone Number*</span>
        <input type="text" id="phoneNumber"><br>
        <span id="phoneMessage" class="message">You must have a valid phone number</span>
         </label>
<input type="submit" id="submit" value="Submit"/>
</form>

JAVASCRIPT

var phoneInput = document.querySelector ('#phoneNumber');
var submitButton = document.querySelector('#submit');

function displayError(fieldname, message) 
    var input_field = document.querySelector('#' + fieldname);
    var error_box = document.querySelector('#' + fieldname + 'Message');

    addClass (input_field, 'error');
    error_box.style.display = 'block';

    error_box.innerHTML = message;


function hideError(fieldname)
    var input_field = document.querySelector('#'+fieldname);
    var error_box = document.querySelector('#'+fieldname+'Message');
    removeClass (input_field, 'error');
    error_box.style.display = 'none';


function addClass(html_element,class_str) 
    if(html_element.className.indexOf(class_str) == -1)
        html_element.className += ' '+class_str;
    


function removeClass(html_element, class_str)
    if(html_element.className.indexOf(class_str) != -1)
        html_element.className = html_element.className.replace(class_str, '');
    


  phoneInput.onblur = function()
    if(!phoneNumberInput.value)
     valid = false;        
    displayError('phoneNumber', 'Please enter your number');
    else if(!isValidPhoneNumber(phoneNumberInput.value))
    valid = false; 
    displayError('phoneNumber', 'The phone number field is invalid');
    else
        hideError('phoneNumber');
    



submitButton.onclick = function()
    var nameIsValid = checkName();
    var emailIsValid = checkEmail();
    var phoneNumberIsValid = checkphoneNumber();

    var valid = nameIsValid && emailIsValid && phoneNumberIsValid;
    return valid;
 

function isValidPhoneNumber(str)
    var phoneNumberPattern = new RegExp('^[a-zA-Z \s\'-]1,$');

【问题讨论】：

您有语法错误。您从未为最后一个函数键入右括号。 抱歉复制粘贴错误，已修复 【参考方案1】：

看起来您只是在这一行中输入了phoneMessage 而不是phoneNumberMessage：

<span id="phoneNumberMessage" class="message">You must have a valid phone number</span>

【讨论】：

@Josh M 不会改变任何东西 也许我看错了你的代码，但是var error_box = document.querySelector('#' + fieldname + 'Message'); 行会选择元素phoneNumberMessage 而不是phoneMessage 你打电话给displayError('phoneNumber', 'The phone number field is invalid');，所以应该是phoneNumberMessage【参考方案2】：

注意：此答案纯粹是作为表单验证的替代解决方案

使用 HTML5 输入类型很容易做到这一点。在这种情况下，您可以非常轻松地使用以下内容：

<form>
    <label for="phoneNumber">
        <span class="textStyle">Phone Number*</span>
        <input type="tel" pattern="((\+|00)[0-9]2|0)[ -]*[1-9]([ -]*[0-9])8" id="phoneNumber">
    </label>
    <button id="submit">Submit</button>
</form>

这就是一切。无需 JavaScript。只需查看this demo（其中还包含 CSS 高亮以确保有效性）。

当尝试输入示例国家/地区代码 10 时，该模式将允许 10 个数字之间有或没有空格或破折号，或者国家/地区代码前缀为 +10 或 0010。 test this regex.

这适用于所有现代浏览器，但不适用于某些较旧的浏览器。 MDN 表示仅 IE10+ 支持，Safari 不支持。其他浏览器都支持它，除了那些几乎不再使用的旧版本。

【讨论】：

这是一个不错的解决方案，但是 OP 应该注意，这仅适用于支持 HTML5 规范的较新浏览器。 @wvandaal 感谢您提醒我。当我开始打字的时候，我确实想过要提到这一点，但是当我写完的时候，我忘记了。我在底部添加了另一段。 @Devs 任何浏览器不支持的输入类型都将默认为输入类型text，在这种情况下同样有效。 是的，但是“tel”类型如何用于电话号码验证 @Devs 我试过在没有模式的情况下使用type="tel"，Chrome 并没有自动将输入限制为工作模式。该模式实际上是必需的，因为输入类型 tel 不会自动验证它。【参考方案3】：

您的代码中有很多事情要做。我冒昧地对其进行了一些清理并简化了您的验证逻辑以实现更大的可扩展性。可以查看完整的工作代码here，但要点如下：

HTML： 与其显示和隐藏每个字段的错误消息，不如考虑使用无序列表来显示错误消息。这种做法很常见，可以大大简化 HTML 和 JS：

<form>
  <ul class="errors"></ul>
  <label for="phone_number">*Phone Number
    <input name="phone_number" type="text"/>
  </label>
  <br>
  <input type="submit"/>
</form>

JavaScript： 这是验证逻辑的核心所在。正如其他人所提到的，您可以使用 HTML5 属性来验证您的数据，但这缺乏跨浏览器兼容性并且容易被用户操纵（尽管后一点也适用于 JS 验证；您应该始终验证在服务器端也是安全的）

window.onload = function() 
  var form = document.querySelector('form');

  // listen for the form submission
  form.addEventListener('submit', validate, false);

  function validate(e) 
    var errors  = ,
        valid   = true,
        errorUL = document.querySelector('.errors'),
        node;

    // clear the errors list
    errorUL.innerHTML = '';

    // iterate through the inputs and validate each one using
    // a case statement
    [].forEach.call(e.target, function(input) 
      switch (input.name)
        case 'phone_number':
          if (!validPhoneNumber(input.value)) 
            // add the appropriate error message to the errors object
            errors[input.name] = "Phone number is not valid";
            valid = false; // set the 'valid' flag to false
          
        // Add more case statements as you need them
        // Example:
        // case 'home_address': 
        // ...
      
    );

    // if the form is invalid
    if (!valid) 
      // prevent the submission
      e.preventDefault();

      // loop through the errors and add the messages to the errorUL
      for (e in errors) 
        node = document.createElement('li');
        node.innerHTML = errors[e];
        errorUL.appendChild(node);
      
    
  

  // This function will return the validated phone number or null
  // You may want to use this function to convert your phone number
  // string to an integer. This function will accept phone numbers 
  // in the following forms:
  //
  // 123.456.7890
  // 1234567890
  // (123)456-7890
  // (123)-456-7890
  // 123-456-7890
  // 123 456 7890
  function validPhoneNumber(n) 
    var r = /^\(?(\d3)\W0,2(\d3)\W?(\d4)$/,
        match = r.exec(n);

    // if the phone number is valid, return the number as an int
    // if the number is invalid, return null
    return match ? match.slice(1).join('')|0 : null;

上面的JS做了几件事：

    它查询&lt;form&gt; 元素并为'submit' 添加一个事件侦听器。这比使用onclick 侦听器更可取，因为它允许您直接访问表单以及输入及其值。 事件侦听器将validate 函数附加为您的事件处理程序。此函数将用于迭代表单中的各种输入（假设您有多个输入）并验证每个输入。您会注意到我使用了switch 语句通过name 属性处理各种输入。这使您可以在添加新输入时轻松添加其他验证。有关 switch 语句如何工作的更多信息，请查看the documentation。 验证所有输入后，validate 函数将检查valid 标志是真还是假。如果表单无效（即valid = false），则每条错误消息都将包装在&lt;li&gt; 标记中并附加到&lt;ul class='errors'&gt;。 validPhoneNumber(n) 函数获取用户输入的电话号码并使用 RegEx 检查它是否有效。如果数字有效，则以整数形式返回；如果不是，该函数将返回null。如果愿意，您可以选择使用此功能将用户电话号码的格式标准化为整数。

希望这能让您了解使用 JS 验证 HTML 表单的好方法。但是请始终牢记，没有任何客户端验证可以替代服务器上的验证。

【讨论】：

以上是关于表单验证不显示消息的主要内容，如果未能解决你的问题，请参考以下文章

验证 php 表单 - 如何在表单上显示错误消息

cakephp 一个表单，多个模型，不显示一个模型的验证消息

自定义 HTML5 表单验证最初不显示自定义错误

两个模型表单一个视图表单验证不显示

Django 表单验证消息未显示

Symfony，在表单中预先提示/显示验证约束消息