Rails，AJAX表单验证

Question

我是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之前退出，但是我只是不知道该怎么做。

Answer 1

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

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

希望对您有所帮助。

Answer 2

您可以使用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/