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 ??

Can you please tell the plugin which you are using for validation? — Abhas Tandon
– Abhas Tandon, Commented Apr 17, 2014 at 5:56
@AbhasTandon, Clearly onclick has nothing to do with this question. The onclick option is only for radio and checkbox elements and true is already the default. Please refer to the documentation before spreading misinformation: jqueryvalidation.org/validate#onclick — Sparky
– Sparky, Commented Apr 17, 2014 at 17:21

Sparky · Accepted Answer · 2014-04-17 17:16:25Z

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
});

Михаил Удовиченко · Accepted Answer · 2022-09-30 06:54:27Z

0

$(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('Неправильне введення')
    }
});

});

edited Sep 30, 2022 at 6:54

answered Sep 30, 2022 at 6:53

Михаил Удовиченко

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Validating Jquery autocomplete field using jquery validation plugin

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related