Rectangle 27 0

Currently, there is no standard built-in way in parsley remote to retrieve backend error message and show it frontend side. You'll have to work it yourself using maybe ParsleyUI here http://parsleyjs.org/doc/index.html#psly-ui-for-javascript to retrieve your ajax call content and attach the error to the validated field.

javascript - parsley.js remote validation response - Stack Overflow

javascript parsley.js
Rectangle 27 0

Problem was solved by using the ParsleyUI methods.

<input type="text" id="UserLogin" maxlength="32" data-ajax-name="login" data-parsley-remote-options='{ "type": "POST",  "data": { "field": "login" } }' data-parsley-errors-messages-disabled="1" data-parsley-remote-validator="validateUsername" data-parsley-remote="1" data-parsley-trigger="focusout" name="data[User][login]" data-parsley-id="2315">

<script>
jQuery('#UserLogin').parsley().addAsyncValidator(
  'validateUsername', function (xhr) {
       var UserLogin = $('#UserLogin').parsley();
       window.ParsleyUI.removeError(UserLogin,'errorUsername');
       if(xhr.status == '200')
           return 200;
       if(xhr.status == '404')
           response = $.parseJSON(xhr.responseText);
           window.ParsleyUI.addError(UserLogin,'errorUsername',response.error);
  }, '/api/validationMethod'
);
</script>

This is nice, but it displays the custom message in addition to the default one. Any idea on how to cope with that?

data-parsley-errors-messages-disabled

javascript - parsley.js remote validation response - Stack Overflow

javascript parsley.js
Rectangle 27 0

<form method="post" id="myForm">
    <input type="text" name="_xsrf" id="_xsrf" value="test">
    <input type="text" name="userName" id="userName" 
            data-parsley-trigger="focusout"
            data-parsley-remote
            data-parsley-remote-options='{ "type": "POST" }'
            data-parsley-remote-validator="validateName"
            data-parsley-remote-message="Name already exists."
            required>
    <!--<input type="button" id="formSave" name="submit" value="Next">-->
    <input type="submit" id="formSave" name="formSave" value="Next">
</form>

It is not a good idea to set submit as the name of your button. Check this answer and this answer.

In your javascript, append the addAsyncValidator to your field instead of the form. As for the validator response, it has to return true of false. If you want your field to be valid when you get a 200 response, then you must use

return xhr.status === 200

If you assume that the field is valid when the status response is 404, then you should use:

return xhr.status === 404

Here is the code that worked for me. If you use a valid URL that returns a 404 status code, the error will be displayed and the form will not be validated.

var _xsrf = $("#_xsrf").val();
var userName = $("#userName").parsley()
    .addAsyncValidator('validateName', function (xhr) {
         return xhr.status === 200;
    }, 'http://localhost/parsley/CheckEmailAvailability.php?_xsrf=' + _xsrf);

$( "#myForm" ).parsley();

$("#myForm" ).submit(function( event ) {
    $(this).parsley("validate");
    if ($(this).parsley("isValid")) {
        console.log('valid');
    }
    event.preventDefault();
});

See this jsfiddle for the full code. Since you have to perform a server request, the form will never be validated (due to Access-Control-Allow-Origin). However, if you test this locally with a valid request, it will work.

This behaves the same way. The error shows up, but the entire form still validates. I'll edit my question to include other inputs in the form.

This still has the same behavior. I read a github issue where @guillaumepotier says "ParsleyUI.addError() only handles interface, not validation itself." Will need to use events like parsley:form:validate. But I'm still lost : /

I was assuming that you were validating the form. I have edited my answer in order to add the form submit event that validates the form. I have also added a jsfiddle, that will never submit the form due to cross origin request). However, if you execute the code locally and provide a valid URL, this should work.

Sir/Madam, you are amazing. Thank you so much. This worked wonderfully. I wish I could give you all the votes in the world. Apologies for not phrasing the problem correctly in the first place.

javascript - Parsley.js remote validation response still validates to ...

javascript parsley.js