javascript - Validating Jquery autocomplete field using jquery validation plugin - Stack Overflow

admin 管理员组

文章数量: 1086019

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 autoplete for both the fields.

$('#form1_origin,#form1_destination').autoplete({
        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,
        pare_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 autoplete 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 ??

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 autoplete for both the fields.

$('#form1_origin,#form1_destination').autoplete({
        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,
        pare_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 autoplete 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 ??

• javascript
• jquery
• autoplete
• jquery-validate

Share Improve this question Follow edited Dec 21, 2015 at 17:57 Sparky 98.8k2626 gold badges202202 silver badges290290 bronze badges asked Apr 17, 2014 at 5:29 Let me seeLet me see 5,09499 gold badges3939 silver badges4949 bronze badges 4

• Can you please tell the plugin which you are using for validation? – Abhas Tandon Commented Apr 17, 2014 at 5:56
• Try adding: onclick: true Inside .validate – Abhas Tandon Commented Apr 17, 2014 at 6:02
• please provide link to your site , or jsfiddle – Pratik Joshi Commented Apr 17, 2014 at 6:03
• @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/validate#onclick – Sparky Commented Apr 17, 2014 at 17:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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 autoplete 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="autopletedField]').on('change', function() {
    $(this).valid();  // trigger validation test
});

$(document).ready(function() {
var validation;
$("#term").autoplete({
    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('Неправильне введення')
    }
});

});

本文标签： javascriptValidating Jquery autocomplete field using jquery validation pluginStack Overflow