CODEWITHSUNDEEP
vue.jsvuejs2
Buffalo
Buffalo

Reputation: 4042

Vee-validate (VueJS) - evaluating a condition asynchronously

Can I make a custom validation rule that returns true/false based on a AJAX request? the problem is that the validate call has finished running when the AJAX call completes.

Do I need to have the rule set/unset a boolean variable based on which the field is valid/invalid?

  const isValidNameRule = {
    getMessage(field)
    {
      return "The name must be unique."
    },
    validate(validatingName)
    {
      var formData = new FormData();
      formData.append("validatingName", validatingName);

      this.$http.post("/api/isValid?name=" + validatingName, formData)
        .then(function (response) {
          // success
          return true;
        }, function (response) {
          // error
          return false; 
        });
    }
  };

Upvotes: 0

Views: 4409

Answers (1)

Buffalo
Buffalo

Reputation: 4042

Didn't know how to work with Promises. Eventually got it working by extending one of the official samples:

 const customRule = {
    getMessage(field, params, data) {
      return (data && data.message) || 'Something went wrong';
    },
    validate(aValue) {

      return new Promise(resolve => {

        var formData = new FormData();
        formData.append("nameFilter", aValue);

        $.ajax({
          type: "POST",
          url: url,
          data: {
            action: "validate",
            value: aValue,
          }
        }).done(function (data) {

          if (!ok)
          {
            resolve({
              valid: false,
              data: {message: "Condition not met"}
            });
          }
          else
          {
            resolve({
              valid: !! aValue,
              data: undefined
            });
          }

        });

      });
    }
  };

Upvotes: 3

Related Questions