停止jQuery表单验证重置由其他JavaScript填充的typeahead.js输入字段

Stop jQuery form validation resetting typeahead.js input field that is populated by other JavaScript

本文关键字：填充 typeahead js 字段 输入 JavaScript 其他 表单 jQuery 验证 停止      更新时间：2024-03-15

我使用jQuery Validator在提交之前需要一个文本输入字段。表单的工作原理如下：

  1. 在页面加载时，JavaScript函数会尝试进行地理定位
  2. 当地理定位成功时，将填充输入字段（除非用户已经填充）

当用户在地理定位成功之前以及在输入字段中输入任何内容之前单击提交时，我看到了一个问题。表单无法正确验证，但当地理定位成功并成功填充输入字段（并且表单重新验证成功）时，如果用户随后单击提交，则输入字段将重置为空，验证失败。

我看不出是什么原因导致字段被重置。它是jQuery验证器吗？如何在重新提交时阻止它被重置？

这是相关代码：

表单（已删除样式）：

<form action='/find' id='search-form' method='post' role='form'>
  <select id='what' name='what'>
    <option>...</option>
  </select>
  <input id='where' name='where' type='text'>
  <button id='search-form-submit' type='submit'>Search</button>
</form>

jQuery代码：

jQuery.validator.setDefaults({
  success: "valid"
});
$('#search-form').validate({
  rules: {
    where: {
       required: true
    }
  },
  highlight: function(element) {
     $(element).addClass('error');
  },
  success: function(element) {
    $(element).removeClass('error');
  },
  errorPlacement: function(){
   return false;
  }
});

在地理定位成功时，执行以下操作：

if (!document.getElementById('where').value) { // if user hasn't typed anything yet...
  document.getElementById('where').value = postcode; // populate with the geolocated postcode
  var validator = $('#search-form').validate();
  validator.element("#where"); // revalidate the form field (this works)
}

报价标题：

"停止jQuery表单验证重置由其他JavaScript填充的typeahead.js输入字段"

这个问题的前提是有缺陷的jQueryValidate插件中没有任何内容可以更改数据输入字段的值这取决于用户或代码中的其他地方。

报价OP:

"我看不出是什么原因导致字段重置。"

我也不能。也许它不在你提供的代码中。否则，这是您展示的唯一一件会改变输入字段值的事情。。。

document.getElementById('where').value = postcode;

旁注：

1） unhighlight回调函数是对highlight函数的补充，而不是success。success回调通常用于在"有效"字段上操作通常隐藏的错误label，例如显示复选标记。

你的代码应该更像这样。。。

highlight: function(element) {   
    $(element).addClass('error');
},
unhighlight: function(element) { 
    $(element).removeClass('error');
},

2） 而不是所有这些。。。

var validator = $('#search-form').validate();
validator.element("#where");

只需使用.valid()方法。。。

$('#where').valid();

.valid()演示：http://jsfiddle.net/LrS32/

事实证明，这是由typeahead.js引起的，我不认为这是相关的（尽管现在已经完全清楚了）。

解决方案似乎是在更新输入字段值时设置typeahead.js查询，在本例中为：

$('#where').typeahead('setQuery', postcode);

我有一段时间对此感到头疼，所以我希望其他人会觉得这很有帮助。

相关文章：