CODEWITHSUNDEEP
jqueryjquery-validate
David Brierton
David Brierton

Reputation: 7397

jQuery Validation Field AutoFills Another, Removing Error without clicking field

I have fields that automatically fill in other textboxes, for example if a dropdown that says Gift is chosen it fills in a textbox with the same value saying Gift.

What I am having trouble with understanding is jQuery's validation. If the textbox is empty and you click submit it will tell you this field is required and the css is red(that I set up for error) but when you then select the dropdown value gift and it prefills the textbox it does not remove the error until you either click the textbox or tab through it.

Has anyone ever had this problem or discovered a solution for fields that automatically fill in other fields?

EDIT

I also have this geolocation that automatically fills in the address when entered that does the same thing. I am trying to figure out where I can add the .valid() so that once an address is chosen and the city, state, and zip are prefilled then it will remove the error css as well.

var placeSearch, autocomplete;
var componentForm = {
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  postal_code: 'short_name'
};

function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */
    (document.getElementById('autocomplete')), {
      types: ['geocode']
    });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
  //var keys=[];for (var key in place.address_components[0]) keys.push(key);
  //alert(keys):
  document.getElementById('autocomplete').value = 
    place.address_components[0]['long_name'] + ' ' +
    place.address_components[1]['long_name'];

  /*document.getElementById('route').value = (document.getElementById('chbSame').checked ? document.getElementById('autocomplete').value : '');*/
  document.getElementById('route').value = '';
}
  // [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
        position.coords.latitude, position.coords.longitude);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

  // [END region_geolocation]
initialize();

http://jsfiddle.net/bobrierton/89nqv5v5/

Upvotes: 0

Views: 2070

Answers (1)

Sparky
Sparky

Reputation: 98738

The jQuery Validate plugin's data validation test is usually only triggered by normal user events like tabbing/clicking (onfocusout), typing (onkeyup), etc.

If you are filling out a field programmatically, then you have to fire the validation test programmatically.

Inside whatever code you use to fill out the field, attach the .valid() method to the field you want to validate.

Otherwise, you can fire it whenever the value of the field itself changes...

$('#myField').on('change', function() {
    $(this).valid();
});

Or when the value of a select changes...

$('#mySelect').on('change', function() {
    $('#myField').valid();
});

However, I do not understand why you would need to validate a field that the user cannot directly fill out. Since you control the data programmatically, it should always be valid.

Upvotes: 3

Related Questions