onClick 远程验证下拉字段答案

【问题标题】：onClick remote validation for dropdown fieldonClick 远程验证下拉字段
【发布时间】：2014-08-09 15:59:32
【问题描述】：

我在下拉字段上使用 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."}
  }
});

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

【问题讨论】：

不要在内部使用 onClick，而是尝试在 onClick 函数内部进行验证。
选项的点击事件没有标准。看到这个related question 和this answer
@koala_dev：那么，有什么技巧可以实现这一点吗？
@Ultimate 你能提供你正在使用的插件的链接吗？
您使用的是哪个验证库？

标签： javascript jquery ajax validation remote-validation

【解决方案1】：

试试这个 - 假设你有

$('#DROPDOWN_ID').on('click', function() { 
    $("#myform").validate();
});

【讨论】：

【解决方案2】：

select 的更改事件可以更好地指示何时进行验证，但没有 onchange 选项。以下应该有效：

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

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

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

JSFIDDLE DEMO

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

http://jqueryvalidation.org/category/plugin/

【讨论】：

【解决方案3】：

我不使用：“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

【讨论】：