OnClick remote check for dropdown field

Question

I am using remote jquery validation in a drop down field to check if the selected field exists or not. The general code works fine and is checked correctly. But the problem is remote verification of sending ajax call after the onChange event, it means that it shows a unique key verification error after clicking anywhere on the page.

I want to check it as soon as the user clicks on the drop-down list. I tried onclick:true, but it does not work. Check out my code:

$("#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."}
  }
});

Thank. Any help would be appreciated.

Answer 1

select , , onchange. :

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

focusout select, onfocusout false. , focusout, remote .

, select, ajax- - . dev - focusout .

JSFIDDLE DEMO

onfocusout : () ( /) . , , , .

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

Answer 2

- < SELECT ID = "DROPDOWN_ID" >

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

Answer 3

: "JQuery Remote Validation", :

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