Question

很好选择使用jQuery验证吗？因为我得到了一个奇怪的错误，我会尝试解释它

如果还没有提交表单，我可以从nice select插件中选择值并正确更新（默认选择下拉列表）值，我可以提交表单没有问题
现在，如果我刷新页面然后我提交表单，jQuery错误验证按预期附加，因为我没有选择一些值，所以我从（精选值）中选择了一些值，现在它没有＆＃39 ; t更新（默认选择）值，以便我无法提交表格

我认为当调用validate插件时，select不会动态更新，或者我可能会遗漏某些东西

html ：

var x = 20151506;

function parse(str) {
    var y = str.substr(0,4),
        m = str.substr(6,2) - 1,
        d = str.substr(4,2);
    var D = new Date(y,m,d);
    return (D.getFullYear() == y && D.getMonth() == m && D.getDate() == d) ? D : 'invalid date';
}

 //document.write (parse('20151506')); 
 document.write (parse(x.toString()));

jQuery ：

<form id="MyForm">
   <select id="MySelect" name="select">
     <option value="">Select a value</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
   </select>
   <button id="MyButton" type="submit">Submit</button>
</form>

任何帮助将不胜感激

提前致谢

Answer 1

jQuery Validate插件会自动在select元素之后插入验证消息。但是，在您的情况下，动态创建Nice Select select时隐藏div元素;验证插件无法再查看或切换此label。

使用the errorPlacement function在 Nice Select div元素之后放置验证消息。我的自定义函数是通用的，适用于表单中所有隐藏的select元素。

errorPlacement: function(error, element) { if (element.is('select:hidden')) { error.insertAfter(element.next('.nice-select')); } else { error.insertAfter(element); } }

然而，这个答案尚未完成。 jQuery Validate插件通常根据用户与select元素交互来触发验证。由于隐藏了select元素且用户没有直接与其进行交互，因此每当更改Nice Select元素时都不会触发验证。

使用自定义change处理函数确保每当更改Nice Select元素时更新验证消息...

$('#MySelect').on('change', function() { $(this).valid(); });

工作演示：https://jsfiddle.net/9yvz4ztv/

BTW：您不需要编写自定义规则来确保select元素包含值。只需使用required规则。

rules: { select: { required: true } }

Answer 2

这是因为error标签展示位置标签直接放在<select>元素之后，但插件使用此代码触发<select>的更改：

// .prev() in this case is the <label class="error">, not "select" ...
n.prev("select").val(s.data("value")).trigger("change")

您可以使用errorPlacement选项更改标签的展示位置：

$('#MyForm').validate({ 
  ignore: [],
  rules: {
    select: {
      selectcheck: true
    }
  },
  errorPlacement: function(error, element) {
    if (element.attr("name") == "select") {
      // place the label after the .nice-select DIV, not <select>:
      error.insertAfter(".nice-select");
    } else {
      error.insertAfter(element);
    }
  }
});

JSFiddle demo

jQuery Validate＆amp;尼斯选择一致吗？

2 个答案: