我怎样才能把阿贾克斯表单内的形式？

Question

我想要有一个Ajax形式，以验证是否用户名已被采取时，用户正在尝试注册。

显然，常规的表格是由常规的表格组成的。
这里有普通的字段，例如Name，Username，Email和Password。

对于此用户名部分，我想添加按钮进行验证。

但是我不知道如果我和普通帖子分开来做它会怎么样。

它变成这样吗？

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %> 

    <%= f.text_field :username, :placeholder => 'username' %></div> 

    <%= form_for(current_user, :url => {:controller => "users", :action => "username_check" }, :remote => true) do |f| %> 
     <button type="submit" class="btn">Check if availavle</button> 
    <% end %> 

    <div class="username_check_message"> 
     <%= render :partial => "users/username_check_message" %> 
    </div> 

    <%= button_tag(:class => "btn btn-large btn-primary") do %> 
     Sign Up 
    <% end %>   

<% end %> 

Answer 1

可以应显示link代替的内部形式，只要绑定onclick事件的联系，在其中您可以创建Ajax功能的js。

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %> 
    <%= f.text_field :username, :placeholder => 'username' %> 

    <a href="javascript:;" class="btn" id="chk">Check if available</a> 

    <div class="username_check_message"> 
    <%= render :partial => "users/username_check_message" %> 
    </div> 

    <%= button_tag(:class => "btn btn-large btn-primary") do %> 
    Sign Up 
    <% end %> 
<% end %> 

JS代码，点击事件

<script type="text/javascript"> 
    $('#chk').click(function() { 
     $.ajax({ 
      url: '/users/username_check', 
      type: 'get', 
      data: 'uname=' + $('#username').val(), // where 'username' is id of username text_field 
      dataType: 'json', 
      success: function(data) { 
       if(data.valid == 'true') { 
        $('.username_check_message').text('Valid'); 
       } else { 
        $('.username_check_message').text('Invalid'); 
       } 
      } 
     }); 
    }); 
</script> 

Answer 2

我想你试图提交一个使用ajax。你可以使用远程选项。

You can check this guide on how to use it.