jQuery Validation custom method

Question

I'm building a form using Google Places API and jQuery Validation. I have a field for the user to populate an address and I need to force him to select an address from the Google Places API suggestions.. I have added a hidden input with value false, i'm having a on change event attached to the original field and if the user selects from the API suggestions, the hidden field value is changed to true, if not the value is false. But somehow it doesn't work.. Here is my code. What am I doing wrong here? If I select an address from the suggestions, the value of the hidden input it is changed to true. Although the on change event doesn't change the value of the hidden field to false upon clearing or change, it waits for the field to be blurred and then changes the value.. If I use on input event it changes the value of the hidden input even if the user just focuses it. And even if the value of the hidden input is false, the custom validation doesn't work, it doesn't show the error message and just accepts that is valid..

HTML:

<div className="half-width">
    <label htmlFor="address">Type in your address:</label>
    <input class="half-width__field" required data-msg="This field is required" data-msg-alt="Please select a valid address from the suggestions" type="text" name="address" id="address" />
    <input id="address_validate" name="address_validate" type="hidden" value="false" />
</div>

JS:

$('#address').on('change', function() {
    // if ( ! $(this).val() ) {
        sessionStorage.clear();
        $('#address_validate').val('false');
    // }
});

// init Google Places API on origin field
const addressField = new google.maps.places.Autocomplete($('#address')[0], {
    fields: ["address_component"],
});
google.maps.event.addListener(addressField, 'place_changed', function() {
    var place = addressField.getPlace();
    let cityFound = false;
    
    sessionStorage.clear();
    $('#address_validate').val('false');
    
    for (var i = 0; i < place.address_components.length; i += 1) {
        var addressObj = place.address_components[i];
        $('#address_validate').val('true');
        sessionStorage.setItem('address', $('#address').val());
    }
});

// jQuery Validate custom method
$.validator.addMethod('isValidAddress', function (value, element, param) {
    if ( $('#address_validate').val() === 'false') {
        return false;
    } else {
        return true;
    }
}, $('#address').attr('data-msg-alt'));

form.validate( {
    errorElement: 'span',
    errorClass: 'error-message',
    errorPlacement( error, element ) {
        error.appendTo( element.closest( '.half-width__field' ) );
    },
    highlight: function(element, validClass) {
        $(element).parent().addClass('field-error');
    },
    unhighlight: function(element) {
        $(element).parent().removeClass('field-error');
    },
    rules: {
        address: {
            required: true,
            minlength: 2,
            isValidAddress: true,
        }
    }
} );

One problem is how you're setting the second parameter of the addMethod() method. This is supposed to be the custom message. If you want the message to get dynamically inserted here from someplace else using jQuery, then you need to wrap this parameter inside a function(){...}. — Sparky
– Sparky, Commented Dec 19, 2023 at 18:25
There is also a method called .valid() that you can attach to the field to programmatically force validation. Let Google Maps do it's thing, set true or false on the field, and on the last line call .valid() to force the custom validation. — Sparky
– Sparky, Commented Dec 19, 2023 at 18:45

Patrick Hume · Accepted Answer · 2023-12-18 19:48:39Z

0

rather than set that value to true which won't trigger the change event of the field as it was prosaically set, look to use the jQuery trigger method instead

https://api.jquery.com/trigger/

so something like:

$('#address_validate').val('true');
$( '#address_validate' ).trigger( "change" );

answered Dec 18, 2023 at 19:48

Patrick Hume

2,2241 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Validation custom method

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related