4

我在下拉字段上使用 JQuery 远程验证来检查所选字段是否已经存在。整体代码工作正常并正确验证。但问题是在 onChange 事件之后发送 ajax 调用的远程验证，这意味着它在单击页面上的任何位置后显示唯一键验证错误。

一旦用户点击下拉选项，我想验证它。我试过onclick:true了，但它不起作用。请检查我的代码：

$("#myform").validate({
  //   onclick:true,
  //   onkeyup:true,
  rules: {
    "customer[customer_personal_details_id]": {
        required: true,
        remote: {
            url: "/validation/check",
            type: "post",
            data: {
                columnVal: function () {
                    return $("#customer_customer_personal_details_id").val();
                }
            }
        }
    }
  },
  messages: {
    "customer[customer_personal_details_id]": {
         required: "Please Select Account Holder", 
        remote: "One active account already exists. Duplicate accounts are not allowed."}
  }
});

谢谢。任何帮助，将不胜感激。

4

3 回答 3

2

试试这个 - 假设你有 <SELECT ID="DROPDOWN_ID">

$('#DROPDOWN_ID').on('click', function() { 
    $("#myform").validate();
});
于 2014-07-04T18:46:01.890 回答
2

的selectchange 事件可以更好地指示何时验证，但没有onchange选择。以下应该有效：

$(function() {
    $('select').on('change', function() {
        $(this).trigger('focusout');
    })
    .on('focusout',function(e) {
        e.preventDefault();
    });
});

除非选项设置为 ，否则触发focusout应触发对select元素触发的验证。您可能希望阻止默认行为，以便它不会触发两次验证。onfocusoutfalsefocusoutremote

在下面的演示中，您将看到，一旦您在selectelement 中选择了一个新值，就会尝试进行 ajax 调用——参见开发工具的网络选项卡——并且focusout没有请求尝试。

JSFIDDLE 演示

onfocusout 类型：Boolean 或 Function() 在模糊时验证元素（复选框/单选按钮除外）。如果未输入任何内容，则跳过所有规则，除非该字段已被标记为无效。

http://jqueryvalidation.org/category/plugin/
于 2014-07-04T18:02:23.003 回答
1

我不使用：“JQuery 远程验证”，但此代码可能会帮助您：

JavaScript 代码：

window . onload = function ()
{
    "use strict";
    document . querySelector ( "form#myform > select" ) . selectedIndex = -1;
}

function test ()
{
    "use strict";
    if ( typeof customOption === "undefined" ) { alert ( "FATAL SYSTEM ERROR !" ); return; }
    alert ( "Valid option selected ! Congratulations !\nYour selected value is: \"" + customOption + "\"" );
}

和 HTML5 代码：

<select onchange="customOption = this . options [ this . selectedIndex ] . value;">
<!-- ( ... ) -->
</select>

这只是示范。您可以调用您的函数，因此您可以：通过更改 HTML5 代码（选择元素 onchange 属性）“在用户单击下拉选项时验证它”。

工作小提琴：JSFiddle

于 2014-07-01T14:57:23.213 回答