0

一般来说，我是 jQuery、AJAX 和 javascript 的新手，我正在尝试对使用 ajax 调用让服务器运行查询的 rails 表单进行一些前端验证。如果我在调试器中，它似乎工作得很好（因为 AJAX 调用有足够的时间返回并停止提交表单），但是当我只是在没有调试器的情况下对其进行测试时，它不会一直工作。我相信这是因为在 ajax 调用之后，javascript 验证方法退出，并且表单提交。这是我的javascript方法

  $('#runner-job-submit').click(function(e) {
    runnerJobValidation(e);
  });

  function runnerJobValidation(e) {
    var user_login = $('#user_login').val();
    var name = $('#name').val();
    var location = $('#location').val();
    var description = $('#description').val();
    var user_exists;
    //AJAX call to check if user exists in the database
    $.post("/jobs/user_exists", {user_login: user_login}, function (response) {
      if(response == "false") {
        $('#runner-new-job-errors').html('');
        e.preventDefault();
        $('#runner-new-job-errors').append('<small style="color:red"> User doesnt exist </small>');
      }
    });
    if(user_login == "" || name == "" || location == "" || description == "") {
        $('#runner-new-job-errors').html('');
        e.preventDefault();
        $('#runner-new-job-errors').append('<small style="color:red"> Please fill out all fields </small>');
      }

  }

这是我的控制器操作网址

      def user_exists?
        user_login = params[:user_login]
        user = User.where("login = ?", user_login).first
        user_exists = user.present?
        respond_to do |format|
          format.js  { render :json => user_exists.to_json}
          format.html { redirect_to jobs_path }
        end
  end

有人可以告诉我正确的方法吗？我觉得解决方案是在从服务器收到runnerJobValidation()之前以某种方式防止退出response，但我只是不知道该怎么做。

4

2 回答 2

1

您正在尝试发出同步 ajax 请求。简而言之，您可以通过将 ajax 对象中的 async 设置为 false 来实现。

您可以在这里找到您的解决方案：如何使 JQuery-AJAX 请求同步。

希望这有帮助。

于 2013-06-10T03:34:25.353 回答
0

您可以使用 jQuery 验证插件，例如http://jqueryvalidation.org/

对于验证，您应该添加新的验证方法http://jqueryvalidation.org/jQuery.validator.addMethod/

像这样的东西：

jQuery.validator.addMethod("user_exists", function(value, element, param) {
    var isSuccess = false;
    isSuccess = $.ajax(type: "POST", url: "/jobs/user_exists", data: {user_login: user_login}, dataType: "json").responseText == "false" ? false : true;
    return isSuccess;
}, jQuery.format("User already exists!"));

对于表单提交：

 $("#myform").validate({
  submitHandler: function(form) {
    // some other code
    // maybe disabling submit button
    // then:
    $(form).submit();
  }
 });

关于如何正确使用插件阅读文档http://validation.bassistance.de/documentation/

于 2013-06-10T03:44:32.183 回答