Question

我在Bootstrap选项卡表单中有一个rails表单，用JQuery制作成位置和功能。当Rails在第二个部分表单上验证时，它不会返回到选项卡表单的第二种形式，因此我倾向于单击选项卡，然后才能访问哪些rails正在验证。

TabbedForm（app / views / clients / registrations / new.html.erb）

<div class="container">
  <div class="row">
    <div class="col-md-12 text-center">
      <h1 class="#">
        <span class="">Create a Free Client Account</span>
      </h1>
      <p class="hidden-xs">
        Looking for work?
        <br class="visible-xs">
        <a href="/signup/contractor">Sign up as a freelancer</a>
      </p>
    </div>
  </div>
</div>

<%=  render 'shared/two_breaks' %>

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <!--col-sm-6 col-sm-offset-3 col-xs-4 col-xs-offset-3-->
      <div class="panel panel-login">
        <div class="panel-heading">
          <div class="row">
            <div class="col-xs-6 tabs">
              <a href="#company-form" class="active" id="company-form-link"><div class="company">COMPANY</div></a>
            </div>
            <div class="col-xs-6 tabs">
              <a href="#individual-form" id="individual-form-link"><div class="individual">INDIVIDUAL</div></a>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-lg-12">
              <div id="company-form" role="form" style="display: block;">
                <h2>COMPANY</h2>
                <%= render 'companies/form', company: @company %>
              </div>
              <div id="individual-form" role="form" style="display: none;">
                <h2>INDIVIDUAL</h2>
                <%= render 'individuals/form', individual: @individual %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JQuery为表单提供支持

//= require jquery
//= require bootstrap-sprockets


$(function() {
    $('#company-form-link').click(function(e) {
        $("#company-form").delay(100).fadeIn(100);
        $("#individual-form").fadeOut(100);
        $('#individual-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });
    $('#individual-form-link').click(function(e) {
        $("#individual-form").delay(100).fadeIn(100);
        $("#company-form").fadeOut(100);
        $('#company-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });

});

我认为问题是因为我确实在表单上设置了一个样式，第一个表单保留display: block;，第二个表单保留display: none;

修正尝试修复它，但如果div有错误，让这个JQuery占据位置。但是，它没有工作

$(function() {
    $('#individual-form .div_with_errors:first').tab('show')
});

如何确保样式display: none;的第二个表单是第一个在验证错误时呈现的表单？

Answer 1

问题实际上是jQuery。没有完全定义什么会使带有错误的选项卡成为第一个显示的选项卡。

我必须查看class of error definition in my source code并使用它来重新定义我的jQuery，以便有错误的标签是第一个显示的标签。

从长远来看，这是修复它的jQuery：

//= require jquery
//= require bootstrap-sprockets


$(function() {
    $('#company-form-link').click(function(e) {
        $("#company-form").delay(100).fadeIn(100);
        $("#individual-form").fadeOut(100);
        $('#individual-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();

    });
    $('#individual-form-link').click(function(e) {
        $("#individual-form").delay(100).fadeIn(100);
        $("#company-form").fadeOut(100);
        $('#company-form-link').removeClass('active');
        $(this).addClass('active')
        e.preventDefault();
    });

});


/*
* Thanks to (c) Ikechi Michael
* contact: +234808-385-0091
* */

$(function() {
    //first hide them both
    $('#company-form').fadeOut(100);
    $('#company-form-link').removeClass('active');
    $('#individual-form').fadeOut(100);
    $('#individual-form-link').removeClass('active'); 

    if ($('#company-form').find('.help-block').length > 0) { //class of error definition in my source code which is .help-block
        $('#company-form-link').addClass('active');
        $("#company-form").fadeIn(100);
    } //make company-form active if it has errors
    else if ($('#individual-form').find('.help-block').length > 0) { //class of error definition in my source code which is .help-block
        $('#individual-form-link').addClass('active');
        $('#individual-form').fadeIn(100);
    } //make individual-form active if it has errors
    else {
        $('#company-form-link').addClass('active');
        $('#company-form').fadeIn(100);
    } //if none have errors, show company-form by default
});

HTML上的样式定义（style =＆＃34; display：block;＆＃34;）正在影响rails验证。

1 个答案: