Try to set custom validation message with jQuery Remote

Question

I have the a form with the following validation setup:

$('#form').validate({
            onfocusout: false,
            onkeyup: false,
            onclick: false,
            success: function (){
                $('#username').addClass('input-validation-confirmation');
            }
        });
$('#username').rules("add", {
        onfocusout: false,
        onkeyup: false,
        required: true,
        email: true,                    
        remote: {
            url: function,
            type: 'GET',
            dataType: 'json',
            traditional: true,
            data: {
                username: function () {
                    return $('#username').val();
                }
            },
            dataFilter: function (responseString) {
                var response = jQuery.parseJSON(responseString);
                currentMessage = response.Message;
                if (response.State == 0) {
                    currentMessage = currentMessage + 0;
                                return false;
                }
                return 'true';
            },
            beforeSend: function (response) {
                showLoadingIndicator($('#username'));
            },
            complete: function () {
                hideLoadingIndicator($('#username'));
            }
        }
});

What this is attempting to do is use the same validation elements (in order to work with some other framework) to show both errors and success methods.

My problem is that the success method of my rule gets fired BEFORE the remote validation has completed. I tried setting the message several ways but the custom messages parameter doesn't seem to be called on validation success.

Does anyone know of other methods to use the validation error field for both success and error messages when using a mix of both remote and pattern validation rules?

Edit:

I now understand I was expecting a success event at the wrong time. I need an event that is fired once validation has completed (not submitted). Is there any such event?

I assume you're using jqueryvalidation.org? If so, it looks like the remote method is on a per-field basis, and should be a child of the field that is going to trigger a remote check . . . — ernie
– ernie, Commented Aug 28, 2013 at 15:53

tsveti_iko · Accepted Answer · 2017-06-27 15:22:30Z

Use the remote, dataFilter and messages parameters like this:

var message = 'Default error message';

$('form').validate({
    rules: {
        element1: {
            remote: {
                url: '/check',
                type: 'post',
                cache: false,
                dataType: 'json',
                data: {
                    element2: function() {
                        return $('.element2').val();
                    }
                },
                dataFilter: function(response) {
                    response = $.parseJSON(response);

                    if (response.status === 'success') return true;
                    else {
                        message = response.error.message;
                        return false;
                    }
                }
            }
        }
    },
    messages: {
        element1: {
            remote: function(){ return message; }
        }
    }
});

Sparky · Accepted Answer · 2013-08-28 18:06:10Z

10

Your code...

$('#username').rules("add", {
    onfocusout: false,
    onkeyup: false,
    required: true,
    email: true,                    
    remote: { ... },
    messages: { ... },
    success: function (label) { ... }
});

The problem here is that onfocusout, onkeyup and success are not "rules". Only individual "rules" and the messages option can be placed inside of the .rules('add') method.

$('#username').rules("add", {
    required: true,
    email: true,                    
    remote: { ... },
    messages: { 
        remote: "custom remote message"
    }
});

See documentation for .rules() method: http://jqueryvalidation.org/rules

onfocusout, onkeyup and success are "options" that only go inside of the .validate() method, which is only attached to the <form> element.

As far as a "custom" message for remote: As per the docs, this error message is automatically going to be the message returned from your server... there is no special setup.

EDIT as per comments and updated OP:

Your code:

$('#form').validate({
        onfocusout: false,
        onkeyup: false,
        onclick: false,
        success: function (){
            $('#username').addClass('input-validation-confirmation');
        }
});

You stated, "Still, with updated code (see above) I never see the success event."

You've disabled all the events on this form. The only event left for triggering validation on this field is when the submit button is clicked. Exactly when do you expect to "see" success fire off?

DEMO: http://jsfiddle.net/xMhvT/

In other words, submit is the only event left to trigger a validation test when you've disabled all the other events.

EDIT based on another OP update:

"I now understand I was expecting a success event at the wrong time. I need an event that is fired once validation has completed (not submitted). Is there any such event?"

success is not an "event". An "event" is a click, blur, keyup, etc. (onkeyup, onfocusout and onclick are options that control the events for this plugin)

success is a "callback function". A "callback function" is what happens upon the event.

• If you need a "callback function" that fires every time a field passes validation, then you can use success.

• If you need a "callback function" that fires when the form passes validation, then you can use submitHandler. However, this is also when the form is submitted.

• If you want to "test" the entire form or a single field to see if it's valid without submitting the form, you can use the .valid() "method".

$('#username').valid();  // for one field

// or

$('#form').valid();  // for the whole form

// you can also...

if ($('#form').valid()) {
   //do something if form is valid
}

This method will fire the test (show the message) and return a boolean value.

DEMO: http://jsfiddle.net/xMhvT/1/

See: http://jqueryvalidation.org/valid/

edited Aug 28, 2013 at 18:06

answered Aug 28, 2013 at 16:29

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

11 Comments

Paul Sachs Over a year ago

Yeah, that's the weirdest thing. I originally had success setup on the validate() function but that was never being called at all. I moved it to the rules call because I could. That's when it started being called at all.

Sparky Over a year ago

@PaulSachs, Perhaps you made some other errors within .validate(). success is also part of the core functionality of the plugin. When the plugin is operating, success will still be fired whether you've declared it or not. Otherwise, I don't know how else to help you other than to show the proper way to use this plugin and its methods.

Sparky Over a year ago

@PaulSachs, putting success within the rules() method totally breaks the plugin. It's firing on page load and when fields are invalid: jsfiddle.net/9AfLa

Paul Sachs Over a year ago

Yes, I see that now. My bad. Still, with updated code (see above) I never see the success event.

Sparky Over a year ago

@PaulSachs, show enough code to make a proper demo... still need to see the HTML markup of the form.

|

md asif rahman · Accepted Answer · 2016-10-13 08:02:08Z

1

I am late to answer this question but I think it may help others:

in your php just need to add the following

if($rows_matched==1){
          echo (json_encode(false));
        }
        else{
          echo (json_encode(true));
        }

and in your js code write the followiing: $(function(){

$('#product_add').validate({
rules:{
  product_sku:{
    remote:{
      url:'check.php',
      type:'POST'
    }
  }
},
messages:{
  product_sku:{
    remote:'already in database'
  }
}
});

});

answered Oct 13, 2016 at 8:02

md asif rahman

3893 silver badges9 bronze badges

Comments

LocoGris · Accepted Answer · 2019-03-04 04:45:39Z

0

dataFilter: function(response) {
                    response = $.parseJSON(response);

                    if (response.status === 'success') return true;
                    else {
                        message = response.error.message;
                        return false;
                    }
                }

edited Mar 4, 2019 at 4:45

LocoGris

4,5003 gold badges17 silver badges31 bronze badges

answered Mar 4, 2019 at 2:39

sw ma

1

Collectives™ on Stack Overflow

Try to set custom validation message with jQuery Remote

4 Answers 4

Comments

11 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

11 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related