jQuery Ajax validation does not return error

Question

I currently work on leave application system. I have dropdown field that I want to validate if api return false, user cannot submit the application.

For example if annual leave not available( getLeaveAvailability return false) should return error message.

Form:

 <div class="form-group">
                                        <label class="control-label col-md-3">Leave Type</label>
                                        <div class="col-md-9">

                                            <select type="text" id="leave_type" name="leave_type" required="required" class="leave_type form-control col-md-7 col-xs-12">
                                                <option value="">Select Leave Type</option>


                                                <option value="1">Annual Leave</option>
                                                <option value="2">Medical Leave</option>

                                            </select>

                                        </div>
                                    </div>

Jquery Ajax Validation:

var validator = form.validate({
      debug: true,
      rules: {
        leave_type: {
          required: true,
          remote: {
            url: base_url + "/getLeaveAvailability",
            type: 'post',
            dataType: 'json',
            data: {
              leave_id: function() {
                return $('[name="leave_type"]').val();
              }
            }
          },
          // leave_type: true
        },
      },
      messages: {
        leave_type: {
          remote: "Leave not available!"
        }
      },

API Response:

 public function getLeaveAvailability(Request $request){

        return 'false';
    }

Show us the actual RENDERED HTML, not your ASP code or whatever that is. Second, show us the `/getLeaveAvailability` function so that we can verify that you are sending back the correct data in a format the plugin can read. For example, PHP would `echo` a "true", "false", or a JSON encoded string. — Sparky, Apr 19 '19 at 03:53
`data: { leave_id: function() { return $('select[name="leave_type"] option:selected').val(); } }` — corroborator, Apr 19 '19 at 04:14
So what is on the server? PHP, ASP, etc?? For example, in PHP, you would use `ECHO`, NOT `return`. `return` returns to the previous function. Instead, you need to OUTPUT to the screen... like `echo`. See: https://stackoverflow.com/questions/2977675/what-is-the-asp-net-equivalent-to-phps-echo — Sparky, Apr 19 '19 at 04:23

score 0 · Answer 1 · answered Apr 19 '19 at 05:43

I think you might get help through below code,

leave_type: {
      required: true,
      remote: {
        url: base_url + "/getLeaveAvailability",
        type: 'post',
        dataType: 'json',
        data: {
          leave_id: function() {
            return $('[name="leave_type"]').val();
          }
        },
        success: function(response) {
            if (response.responseText == "true") { //here you have to check the return response from server side
                //Write statement if success

            } else {  
                //Write statement if failed
            }
        }
    }
}

This is wrong. The plugin ***automatically*** handles the JSON encoded response string from the server-side script. You are not supposed to write an ajax `success` function for this, nor would that be able to control the valid/invalid routine of the plugin. [Doesn't anyone read the documentation?](https://jqueryvalidation.org/remote-method/) — Sparky, Apr 19 '19 at 16:15

jQuery Ajax validation does not return error

1 Answers1