标签: bootstrap-form-helper

是否可以使用JQuery Validation来验证Bootstrap Datepicker？由于它没有暴露这个input领域,我无法让它验证.

示例:https://jsfiddle.net/Khrys/2rcr9j5s/

$.validator.setDefaults({
   submitHandler: function() {
      form.submit()
   }
});


$().ready(function() {
var container = $('div.containerx');

    $("#Form").validate({
        ignore: [],
        messages: {
            StartTime: {
                required: "Select the StartTime."
            }
        },
        errorContainer: container,
        errorLabelContainer: $("span", container),

        highlight: function ( element, errorClass, validClass ) {
            $('#StartTime').addClass( "btn-danger" );
            $('#Filter').addClass( "btn-danger" );
        },
        unhighlight: function ( element, errorClass, validClass ) {
            $('#StartTime').removeClass( "btn-danger" );
            $('#Filter').removeClass( "btn-danger" );
        }
    });
}); 

更新:

类btn-danger需要正确地应用于元素.

https://jsfiddle.net/2rcr9j5s/4/

我尝试过使用data-bv-notempty属性但没有成功.代码示例如下:

<form class="form-horizontal" id="form-registration" action="/submit.php" method="post" >
  <div class='form-group'>
  <div class='field-group'>
    <label for='user_name' class='col-sm-5 control-label' id='label__user_name'>Name<sup>*</sup>:</label>
    <div class='col-sm-7 control-data'><input type='text' name='user_name' required data-bv-notempty  class='form-control' ></div>
  </div>
  </div>

  <div class='form-group'>
  <div class='field-group'>
    <label for='date_entry' class='col-sm-5 control-label' id='label__date_entry'>Date<sup>*</sup>:</label>
    <div class='col-sm-7 control-data'>
    <div class='bfh-datepicker' data-name='date_entry' data-date='' data-bv-notempty data-max='today'></div>
    </div>
  </div>
  </div>

  <div class='text-center'><button type='button' id='btn-submit' class='btn btn-sm btn-default'>Continue</button></div>
  </form>

第一个字段user_name通过属性data-bv-notempty成功验证,但不是date_entry字段.有什么建议吗？

UPDATE

发现一些奇怪的东西.我将data-bv-field='date_entry'属性添加到bfh-datepickerdiv中.现在,如果首先选择日期并执行验证,则会通过验证.另一方面,如果首先执行验证,验证失败,并且在验证失败后输入日期,则红叉将保留,验证仍然无法通过.离奇.

我正在尝试创建一个混合水平和垂直元素的表单.我设法做到了它看起来不错:http://www.bootply.com/rOibTngOct(你可以在bootply上看到结果,但我也会把代码放在这里)

<div class="col-md-4 col-md-offset-4">
  <form role="form">
    <div class="form-group">
      <label for="name">Name</label>
      <input class="form-control" type="text">
    </div>
  </form>
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label class="col-xs-9 control-label">Choice that you prefer</label>
      <div class="col-xs-3">
        <select class="form-control select">
          <option>A</option>
          <option>B</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label class="col-xs-5 control-label">Another choice</label>
      <div class="col-xs-7">
        <select class="form-control select">
          <option>very long choice C</option>
          <option>very long choice D</option>
        </select>
      </div>
    </div>
  </form>
  <form role="form">
    <div class="form-group">
      <label for="name">Address</label>
      <input class="form-control" type="text">
    </div>
  </form>
</div>

但正如你所看到的,我正在使用3种不同的形式!我只需要一个表单(通过AJAX提交给服务器)

我需要帮助!我试过这个:http://www.bootply.com/pCCodAQaKN …

根据我模型中的数据,我无法设置具有选定值的重复字段.

目前我在我的用户模型中:

@Required
public String username;

@ManyToMany
public List<Stay> places;

而我的Stay模型:

@Required
@ManyToOne
public Place place;

@Required
@Formats.DateTime(pattern="yyyy-MM-dd")
public Date startDate;

@Required
@Formats.DateTime(pattern="yyyy-MM-dd")
public Date endDate;

我的Scala视图形式:

    @(formUser: Form[User])
...
    @repeat(formUser("places"), min = 1) { stayField =>
      <div id="groupLocationField">
        // Don't manage to reach User->Places->Place
        @select(formUser("stayField.places"), options(Place.optionsTitle))
        @inputDate(formUser("stayField.startDate"))
        @inputDate(formUser("stayField.endDate"))
      </div>
    }

stayField是一个包含的Form.Field类型 Field(null,places[1],ArrayBuffer(),None,ArrayBuffer(),Some(Paris Mon Oct 29 00:00:00 CET 2018 Wed Jun 11 00:00:00 CEST 2014 null))

但似乎已将我的地方和日期转换为字符串.@stayField包含我的Stay模型toString方法的值.

@stayField.value = Paris Mon Oct 29 00:00:00 CET 2018 Wed Jun 11 00:00:00 …