Feature Request: Remote Method for custom, informative(success?) message
fhughes90 opened this issue · comments
I've considered trying:
- addMethod to perform custom ajax calls for server-side validation. Seems like Jquery still handles as either error or not.
- using the remote option and changing the dataFilter{} to always return true.
...but wondering if the remote method could offer a flag as an option to handle error OR success responses.
Right now, I don't have a solution to perform what I am trying to do. Maybe one of my above methods is sufficient and I am missing something but it would be nice for the plugin to handle custom, successful message natively with errorClass and validClass handling.
Subject of the issue
I have a form field that needs to perform an ajax call to the server and verify if the value is existing or not. If true (value is existing), then I want to return a custom, success message that is informative for the user. If false(value does not exist) then no message is returned but only True - the input is still .valid and jquery carries on. In other words, this rule only provides additional feedback in a successful manner and never handles the response as an error.
I can return a custom message, but the plugin currently views any response != 'true' to be an error and places my errorClass on my <input> and <label>. The desired outcome is if any response made, the plugin does not handle it as an error.
Your environment
- version of
jquery-validate: v.1.19.3 - which browser and its version: Chrome 100.0.4896.127 (Official Build) (x86_64)
Expected behavior
The desired outcome is if any response made, the plugin does not handle it as an error. Could be handled as validClass or an alternate, informativeClass.
Actual behavior
If the response != 'true, then it is not valid.
Here is my code for my first method using the addMethod approach. My server either returns True or the custom message.
$.validator.addMethod('verifyStationID', function(value, element) {
/*
Custom method to verify if a Station ID already exists from the
server-side. If so, we want to display a custom, informative message
to display other sites that use the subject station ID.
*/
$.ajax({
type: 'GET',
url: '/ajax/verify_station_id',
dataType: 'json',
data: {
'station_id': value,
},
async: true,
success: function(msg) {
if(msg != true) {
// display custom label and add validClass styling
}
else {
// remove custom label and remove validClass styling
}
// No mater what - return true so JQuery sees this validtion as successful
return 'true'
},
})
})
and then my validator.setDefaults - I made sure success knows the label class of .valid-feedback
$.validator.setDefaults({
/*
Set defaults for error handling messages.
*/
errorClass: 'is-invalid',
validClass: 'is-valid',
highlight: function(element, errorClass, validClass) {
if (
$(element)
[0].type === 'radio'
) {
var inputs = $(element)
.closest('.radio-group')
.children()
.find('input')
$(inputs)
.each(function() {
$(this)
.removeClass(validClass)
.addClass(errorClass)
})
}
else {
$(element)
.removeClass(validClass)
.addClass(errorClass)
}
},
unhighlight: function(element, errorClass, validClass) {
if (
$(element)
[0].type === 'radio'
) {
var inputs = $(element)
.closest('.radio-group')
.children()
.find('input')
$(inputs)
.each(function() {
$(this)
.removeClass(errorClass)
})
}
else {
$(element)
.removeClass(errorClass)
.addClass(validClass)
}
},
errorPlacement: function(error, element) {
$(error)
.addClass(
'invalid-feedback'
)
if (
element[0].type === 'radio'
) {
error
.insertAfter(
element.closest('fieldset')
)
}
else {
$(element)
.parent()
.after(error)
}
},
success: 'valid-feedback'
})
Here is my code for the second method using the remote option. Server still returns True or custom message.
$("form.create-site").validate({
rules: {
...
StationID: {
required: true,
validStationID: true,
remote: {
url: '/ajax/verify_station_id',
dataFilter: function(response) {
message = $.parseJSON(response)
if (
message != true
) {
// display custom label and add validClass styling
}
// No mater what - return true so JQuery sees this validtion as successful
return true
},
},
},
....
},
messages: {
.....
}
})
This method seems to get closer to what I am after as my <input> receives the validClass but the label still gets the errorClass
Have a look at https://github.com/proengsoft/laravel-jsvalidation/blob/ef13197bacd30ef193410375e7943d1355056bb0/resources/assets/js/jsvalidation.js#L258 maybe it will help with your ajax addMethod approach
Any updates on this feature?
This issue/proposal has been automatically marked as idle and stale because it hasn't had any recent activity. It will be automatically closed if no further activity occurs. If you think this is wrong, or the problem still persists, just pop a reply in the comments and one of the maintainers will (try!) to follow up.
Thank you for contributing :)
Any updates?
The desired outcome is if any response made, the plugin does not handle it as an error. Could be handled as validClass or an alternate, informativeClass.
It would be best if you just follow the ajax docs and return true