Autocomlete + JQuery validation
I have some Autocomplete fields, bound to a DataManager. When I set ValidationRules and ValidationMessages and there is a Validation Error, the error message does not disappear when I programmatically fill the field.
<ej:Autocomplete ID="txtShipName" runat="server" Width="350px" Height="40px" DataTextField="Name" DataUniqueKeyField="AddressID" Locale="nl-BE" FilterType="Contains" EnableDistinct="true" WatermarkText="To: Address Book Search" PopupWidth="600px" Query="ej.Query().requiresCount()" ShowEmptyResultText="False">
<DataManager URL="NewOrder.aspx/GetAddressbook" Adaptor="WebMethodAdaptor"></DataManager>
<MultiColumnSettings Enable="true" ShowHeader="true" StringFormat="{0}">
<Columns>
<ej:Columns Field="Name" HeaderText="Name" FilterType="Contains" />
<ej:Columns Field="City" HeaderText="City" FilterType="Contains" />
<ej:Columns Field="Street" HeaderText="Street" FilterType="Contains" />
</Columns>
</MultiColumnSettings>
<ValidationRule>
<ej:KeyValue Key="required" Value="true"></ej:KeyValue>
</ValidationRule>
<ValidationMessage>
<ej:KeyValue Key="required" Value="*Name Required*"></ej:KeyValue>
</ValidationMessage>
</ej:Autocomplete>
-> fill in field from Google API with listener on changed event
acShip = new google.maps.places.Autocomplete(document.getElementById('<%=txtShipGoogle.ClientID %>'), { region: 'EU' });
acShip.onFocus = geolocate(acShip);
acShip.addListener('place_changed', fillInShipAddress);
fillInShipAddress:
if (place.name) {
$('#<%=txtShipName.ClientID %>').ejAutocomplete({ value: place.name.toUpperCase() });
};
-> validator defaults
$.validator.setDefaults({
//Ignore input of numerictextbox
ignore: ".e-numerictextbox",
//if we don’t set custom class, default “error” class will be added
errorClass: 'e-validation-error',
//it specifies the error message display position
errorPlacement: function (error, element) {
$(error).insertAfter(element.closest(".e-widget"));
}
});
-> validation message does not disappear when text is entered programmatically
SIGN IN To post a reply.
3 Replies
Dear,
thanks for the sample. I can replicate the issue in your sample, if you add a Google Maps autocomplete field and a listener to fill in the selected Google Address into the Syncfusion Autocomplete. So if you first click Submit, you get the validation error. If you then search Google and select an address, the autocomplete field gets filled in, but the validation error remains:
Please update your sample with the items in bold:
PS I have replaced my Google Maps API key with *****
<button onclick="valuechange()">change value</button>
<button type="submit" runat="server">Submit</button>
<asp:TextBox ID="txtShipGoogle" runat="server" Width="300px" Height="40px" CssClass="form-control" placeholder="Google Search" />
<ej:Autocomplete ID="autoComplete" runat="server" Width="300px" DataTextField="Name" ShowPopupButton="true" DataUniqueKeyField="Role" Query="ej.Query().requiresCount()">
<datamanager url="Default.aspx/Get" adaptor="WebMethodAdaptor" />
<multicolumnsettings enable="true" showheader="true" stringformat="{0}">
<Columns>
<ej:Columns Field="Name" HeaderText="Name" FilterType="Contains" />
<ej:Columns Field="Role" HeaderText="Role" FilterType="Contains" />
<ej:Columns Field="Street" HeaderText="Street" FilterType="Contains" />
</Columns>
</multicolumnsettings>
<validationrule>
<ej:KeyValue Key="required" Value="true"></ej:KeyValue>
</validationrule>
<validationmessage>
<ej:KeyValue Key="required" Value="*Name Required*"></ej:KeyValue>
</validationmessage>
</ej:Autocomplete>
<script>
$.validator.setDefaults({
//if we don’t set custom class, default “error” class will be added
errorClass: 'e-validation-error',
//it specifies the error message display position
errorPlacement: function (error, element) {
$(error).insertAfter(element.closest(".e-widget"));
}
});
function valuechange(args) {
$('#<%=autoComplete.ClientID %>').ejAutocomplete({ value: "Test" });
}
function init() {
acShip = new google.maps.places.Autocomplete(document.getElementById('<%=txtShipGoogle.ClientID %>'), { region: 'EU' });
acShip.addListener('place_changed', fillInShipAddress);
};
function fillInShipAddress() {
var place = acShip.getPlace();
if (place) {
if (place.name) {
$('#<%=autoComplete.ClientID %>').ejAutocomplete({ value: place.name.toUpperCase() });
document.getElementById('<%=txtShipGoogle.ClientID %>').value = "";
};
};
};
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=*****&libraries=places&callback=init" async="async" defer="defer"></script>
SIGN IN To post a reply.
