onClick remote validation for dropdown field

Question

I am using JQuery remote validation on drop-down field to check whether the selected field already exists or not. The overall code is working fine and validates properly. But the issue is remote validation sending an ajax call after onChange event, means it is showing unique key validation error after clicking anywhere on page.

I want to validate it once user clicks on dropdown option. I tried onclick:true but it's not working. Please check 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."}
  }
});

Thanks. Any help would be appreciated.

Instead of using onClick inside, try validating inside an onClick function. — Maxzeroedge, Jun 19 '14 at 08:08
There's no standard for click event on options. See this [related question](http://stackoverflow.com/questions/1402227/jquery-click-event-on-select-option-element-in-chrome) and [this answer](http://stackoverflow.com/a/10103116/2049063) — Omar, Jun 30 '14 at 05:44
@koala_dev: So, is there any trick available to achieve this? — J.K.A., Jun 30 '14 at 06:39
@Ultimate Can you provide a link to the plugin you are using? — Lucky Soni, Jul 01 '14 at 15:12

PeterKA · Answer 1 · 2014-07-06T16:41:59.473

The select's change event is a much better indicator of when to validate but there's no onchange option. The following should work:

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

Triggering focusout should trigger a validate to be fired on the select element unless the onfocusout option is set to false. You may want to prevent the default behavior of focusout so that it does not trigger a remote validation twice.

In the demo below you'll see that as soon as you select a new value in select element, an attempt to make an ajax call is made -- see network tab of dev tools -- and on focusout no request attempt is made.

JSFIDDLE DEMO

onfocusout Type: Boolean or Function() Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid.

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

score 2 · Answer 2 · answered Jul 04 '14 at 18:46

2

Try this - assuming you have <SELECT ID="DROPDOWN_ID">

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

answered Jul 04 '14 at 18:46

Jacek Pietal

1,918
1
17
27

score 1 · Answer 3 · answered Jul 01 '14 at 14:57

I do not use: "JQuery Remote Validation", but this code might help you:

JavaScript code:

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 + "\"" );
}

and the HTML5 code:

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

This is only demonstration. You can call your function, so you can: "validate it once user clicks on dropdown option" by change HTML5 code ( select element onchange attribute ).

Working fiddle: JSFiddle

onClick remote validation for dropdown field

3 Answers3