Validating Jquery autocomplete field using jquery validation plugin

Question

I am not so good with jquery and hence need your help.

I have a form in which there are two fields "origin" and "destination". So I am using the jquery autocomplete for both the fields.

$('#form1_origin,#form1_destination').autocomplete({
        lookup: countriesArray,
        minChars: 0,
    });

It works great but when I am trying to validate these fields using jquery validation plugin, I get some problems.

Here is the code:-

$('#form_1').validate({
    errorClass: "airError",
    focusInvalid: true,
    success: function(element){
        $(element).closest('.airError').removeClass('.airError');
    },
    errorPlacement: function(error,element){
        if(element.attr("name") === "form1_infant" || element.attr("name") === "form1_departure"){
            error.insertAfter('#showErrors');
        }else{
            error.insertAfter(element);
        }
    },
    rules: {
    form1_origin: {
        validSelectionOrigin: true,
    },
    form1_destination:{
        validSelectionDestination: true,
        compare_origin_dest: true
    },
    // rules for  rest of the fields
    },
});

Problem:-

As I am pretty sure that jquery validates the fields on onkeyup. So If I TYPE the value in this field, it works fine but when I select the value from the autocomplete list, It does not validate the field as I can still see the error being displayed. So what can i do to make it work for both ??

Answer 1

Quote OP:

"As I am pretty sure that jquery validates the fields on onkeyup. So If I TYPE the value in this field, it works fine but when I select the value from the autocomplete list, It does not validate the field as I can still see the error being displayed. So what can i do to make it work for both?"

The jQuery Validate plugin evaluates text input elements by several triggers... key-up, blur, and submit button click (all fields at once).

The jQuery Validate plugin also provides you with the .valid() method where you can trigger validation programatically.

I don't think you've shown enough relevant code, but basically, you'll need to trigger .valid() whenever the value of the field changes.

Adjust code as required...

$('input[name="autocompletedField]').on('change', function() {
    $(this).valid();  // trigger validation test
});

Answer 2

$(document).ready(function() {
var validation;
$("#term").autocomplete({
    source: 'search_product.php',
    change: function(event, ui) {
        if (!ui.item) {
            this.value = '';
            validation = false;
            console.log(validation)
        } else {
            validation = true;
            console.log(validation)
        }
    }
});
   
$('.validation').on('submit', function(e){
    e.preventDefault();
    
    if (validation) {
        this.submit();
    }{
        alert('Неправильне введення')
    }
});

});