Ruby on Rails : 파르게 - 레일을 사용합니다

Question

파르순으로 입력 필드를 확인하려고합니다. 알아 냈습니다. <form data-parsley-validate> ... </form>를 추가하면 내 버튼이 작동하지 않으므로 탐색 할 수 없도록하십시오 (다음 페이지로 계속).

여기서 내가 가진 것의 한 예가 있으며, 내가해야 할 일은 그것이 필요하고 100-350의 범위 내에서,

<form data-parsley-validate>
  <ol>
<li>
  <p>
    <div class="measure_question">
          <b>Weight</b><i>(pounds):</i>
        </div> 
    <div class="measure_answer">
          <%= text_field(:baseline, :base_weight, :style => "width:100px;") %>
        </div> 
  </p>
</li>    
  </ol>
</form>

.

도움이 크게 감사 할 것입니다. 나는 이미 보석이 설치되어 있고, 나는 그것이 프론트 엔드와 상호 작용하는 방법을 알아낼 필요가 있다고 생각한다.

편집.

와 함께 파슬리 레일을 얻는 간단한 연습은

나는이 프로젝트에서 짧은 동안 멀리 떨어져 왔고, 그 다음 다시 왔고, 일하고있다. 나는 빠른 답변을 필요로하는 다른 사람을 위해 레일을 위해 파슬리를 일하고있는 가이드를 신속하게 제공하고자했습니다.

1 단계 : "파슬리 레일"을 포함합니다. 번들 명령을 실행하십시오.

2 단계 : 오류 / 성공의 디스플레이에 대한 일부 시동 코드 인 다음 CSS를 포함합니다.

자산 / 스타일 시트 / custom.css.scss

/* Parsley */

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

.parsley-errors-list {
  margin: 2px 0 3px 0;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in-;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

.

3 단계 : '데이터 - 파슬리 유효성 검사'를 양식에 추가하십시오.

이전 :

<%= form_for @your_form do |f| %>

.

후 :

<%= form_for @your_form, html: {"data-parsley-validate" => ''} do |f| %>

.

4 단계 : 일부 필드가 필요합니다.

<%= text_field(:your_table, :weight_variable, :style => "width:100px;", :required => '') %>

.

그리고 그게 다야합니다. 나는 이것이 미래에 다른 사람을 돕기를 바랍니다.

Answer 1

저는 "파슬리 레일"보석의 최신 버전을 사용하고 있으며 지침이 말하는 것처럼 자산 파이프 라인 매니페스트 파일에 파슬리가 필요합니다.

첫째, 할 때 'Data-Parsley-Validate'를 각 양식에 추가해야합니다. 나는 form_for를 사용하고, 나를 위해 일한 구문은 다음과 같습니다.

<%= form_for @user, html: { 'data-parsley-validate' => '' } do |f| %>

.

유효성이 검사 할 필드의 경우 내장 된 유효성 검사기 섹션 문서는 유효성 검사를위한 다양한 기술을 보여주는 데 도움이됩니다. "범위"유효성 검사기를 사용하여 값이 주어진 범위 내에 있는지 확인할 수 있습니다.

parsley.js는 자체 목록 외에도 "필수"와 같은 일부 HTML5 속성을 지원합니다. 다음은 "이름"텍스트 필드가 존재하고 적어도 2 자 이상이며 흐림의 유효성 검사를 트리거하는 방법의 예입니다.

<%= f.text_field :name, required: true, 'data-parsley-minlength' => '2', 'data-parsley-trigger' => 'blur' %>

.

트리거 옵션 jQuery를 사용하면 구문이 문서의 "필드의 UI 필드"섹션에 나열됩니다.

마지막으로 "Nofollow"> 예제 parsley.js 사이트에서 제공하는 것이 도움이됩니다. ...에 생성 된 HTML이 원하는 동작을 보지 않는 경우 구문과 일치하는지 확인하십시오.