email validation and email exists check using ko.observable-CodePudding

i want to apply validations on email if email is valid or not , and after that check in db using ajax to verify email already exist and email already exixt check should work if first check is passed , here is what i did , iam stucked in email_already_exist check that how to validate only if above check is passed , if anyone have idea how to do that

// code which checking email is valid
  email: ko.observable((ref = REGISTRY.unsavedUser) != null ? ref.email : void 0).extend({
    required: true,
    email: {
      params: true,
      message: 'Please enter a valid email.'
    },
    focus:true
  }),

  // function to check email exists
  var email_exist_check = function() {
  var errorElement = $('#parent-email-signup');
  var emzil = errorElement.val();

    return = $.ajax({
      url: '/api/v3/email_exists',
      method: 'POST',
      async: false,
      data: {
            email: emzil
          },
      success: function(data){

        console.log(data);

      },
      error: function (response, status) {
         showFlashMessage('An error occured, please try again later.', 'error');
      }
    });
    
    

};

email exist function is ready iam stucked that how to use in the above code please help

CodePudding user response：

Since ajax is asynchronous you'll have to wait for the server response, returning the ajax call will not wait for the server call to resolve. One way to solve this is using a callback (another would be promises with async/await)

var email_exist_check = function(email, onSuccess, one rror) {
  $.ajax({
    url: '/api/v3/email_exists',
    method: 'POST',
    async: false,
    data: { email },
    success: function(data){
      console.log(data);
      if (data && !data.error) { return onSuccess(); }
      return one rror(data && data.error);
    },
    error: function (response, status) {
       one rror(response);
    }
  });
};

// After doing a front-end email verification
email_exist_check(ref.email, () => {
    console.log('Email is valid');
}, (error) => {
    console.error('Something went wrong', error);
});

CodePudding user response：

Never, never never use async: false on Ajax calls.

What you need:

An API wrapper, for convenience and code readability later.

const API = {
  email_exists: function (email) {
    return $.post('/api/v3/email_exists', {
      email: email
    }).then(function (result) {
      // evaluate result & return true (email exists) or false (email is free)
      return ...;
    }).fail(function (jqXhr, status, error) {
      showFlashMessage('An error occured, please try again later.', 'error');
      console.log('Error in email_exists', email, jqXhr, status, error);
    });
  },
  // add other API functions in the same way
};

and async validation rule that calls your API:

ko.validation.rules.emailFromAPI = {
  async: true,
  validator: function (val, params, callback) {
    API.email_exists(val).done(function (exists) {
      callback(!exists);    // validation is successful when the email does not exist
    });
  },
  message: 'Please enter a valid email.'
};

an observable that uses this rule:

email: ko.observable((ref = REGISTRY.unsavedUser) != null ? ref.email : void 0).extend({
  required: true,
  emailFromAPI: true,
  focus:true
}),