Question

我有很多书籍告诉我如何使用jQuery插件进行验证，但是我正在开发的项目需要一些非正统的方法。

在下面的示例代码中：我为每个错误消息持有者添加了一个ID，因为我想单独调用每条消息。我需要通过删除标记并在 离开事件（如果可能） 上调用标记来隐藏整个消息，如果特定项目出现错误。

我写了这篇jQuery作为一个例子：所以我没有使用验证插件来生成错误消息，而是我需要它做的就是在 离开事件上显示消息

出于说明目的：

<script type="text/javascript">
$(document).ready(function(){
  $('#signup').validate({
    rules: {
      txtUserName: {
        required: true,
        txtUserName: true
      }
    }, 
    messages: {
      txtUserName: {
        required: "Please supply your e-mail address.",
        txtUserName: "This is not a valid e-mail address."
      }
    } 
  });
});
</script>

这是一个基本的示例表单：

<form action="/" method="post" id="signup">
  <ul>
    <li>
      <p id="flgUserName">Hide on page load but show on error</p>
      <input name="txtUserName" id="txtUserName" type="text" class="required">
      <label for="txtUserName">Username:</label>
    </li>

    <li>
      <p id="flgEmail">Hide on page load but show on error</p>
      <input name="txtEmail" id="txtEmail" type="text" class="required">
      <label for="txtEmail">E-mail:</label>
    </li>

    <li>
      <input type="submit" name="submit" value="Submit">
    </li>
  </ul>
</form>

Answer 1

您可以使用jquery的.blur()来确定表单输入元素何时失去焦点。

从那里，您可以通过formInputElement.validity.valid == true检查表单输入元素是否有效。这仅适用于您为每个表单输入元素添加了html5的required属性。

您的代码可能如下所示的示例：

$('form input').blur(function() {
    if(!this.validity.valid) {
        $(this).prev().show();
    } else {
        $(this).prev().hide();
    }
});

此外，您可能希望更改输入元素的type属性，以便正确验证它们。这里有一个新类型的输入元素列表：

http://www.w3schools.com/html/html5_form_input_types.asp

通过在加载时隐藏项目并在离开事件时显示错误时进行验证

1 个答案: