jQuery驗證不工作在形式

Question

我有一種形式，其中rails和jQuery兩種驗證都不起作用。有沒有其他的方法來進行驗證，因爲當我沒有填寫表單的任何字段，並單擊表中創建按鈕記錄創建。

<div class="box box-default"> 
     <div class="box-header with-border"> 
     <h3 class="box-title"> Employee Resignation </h3> 
     </div><!-- /.box-header --> 
     <div class="box-body"> 
     <%= bootstrap_form_for(@employee_resignation,html: {id: 'employee_resignation'}) do |f| %> 
     <!-- <= f.hidden_field :employee_id, :value => current_user.employee_id %> --> 
     <%= f.hidden_field :application_date, value: Date.today %> 

      <div class="row"> 
      <div class="col-sm-3"> 
       <div class="form-group required"> 
       <%= f.select :employee_id, all_active_employee_with_code, {include_blank: "Select Employee",label: "Employee"},{:class=>"select2 select2-hidden-accessible",:style=>"width: 100%;",:tabindex=>"-1",onchange:"var a={id:$(this).val()}; $.get('/employee_resignations/display_notice_period',a,function(response){});"}%>  
       </div> 
      </div> 


      <div class="col-sm-3"> 
      <div class="form-group required"> 
       <div class="input-group"> 
        <div class="input-group-addon"> 
        <i class="fa fa-calendar"></i> 
        </div> 
        <%= f.text_field :resignation_date,class: 'resignation',label:'Resignation Date'%> 
       </div> 
       </div> 
      </div> 

      <div class="col-sm-3"> 
       <div class="field"> 
       <%= f.select :leaving_reason_id, all_leaving_reason,{label: 'Reason of Leaving',include_blank: " Select Reason of Leaving"} %> 
       </div> 
      </div> 

      <div class="col-sm-3"> 
      <div class="field"> 
       <%= f.text_field :notice_period, label:'Notice Period (in days)',readonly: true %> 
      </div> 
      </div> 
      </div> 

     <div class="row"> 
      <div class="col-sm-12"> 
      <div class="field"> 
       <%= f.text_area :reason, label: "Reason" %> 
      </div> 
      </div> 
     </div> 

      <div class="row"> 

      <div class="col-sm-3"> 
      <div class="form-group required"> 
      <div class="input-group"> 
       <div class="input-group-addon"> 
       <i class="fa fa-calendar"></i> 
       </div> 
       <%= f.text_field :tentative_leaving_date, class: 'resignation',label:'Requested Releaving Date'%> 
      </div> 
      </div> 
      </div> 

      <div class="col-sm-3"> 
      <div class="field"> 
      <div class="input-group"> 
       <div class="input-group-addon"> 
       <i class="fa fa-calendar"></i> 
       </div> 
       <%= f.text_field :exit_interview_date, class: 'resignation',label:'Exit Interview Date'%> 
      </div> 
      </div> 
      </div> 

      <div class="col-sm-3"> 
      <div class="form-group required"> 
      <div class="input-group"> 
       <div class="input-group-addon"> 
       <i class="fa fa-calendar"></i> 
       </div> 
       <%= f.text_field :leaving_date, class: 'resignation',label:'Leaving Date'%> 
      </div> 
      </div> 
      </div> 

      <div class="col-sm-3"> 
      <label>Settled On</label> 
      <div class="field"> 
       <div class="input-group"> 
       <div class="input-group-addon"> 
        <i class="fa fa-calendar"></i> 
       </div> 
       <%= f.text_field :settled_on,hide_label: true, class: 'resignation'%> 
       </div> 
      </div> 
      </div> 

      </div> 

      <div class="row"> 


      <div class="col-sm-12"> 
      <div class="field"> 
      <%= f.text_area :note, label:'Note' %> 
      </div> 
      </div> 
     </div> 

     <div class="row"> 
     <div class="col-sm-6"> 
      <div class="actions"> 
      <%= f.submit 'Create Employee Resignation',class: "btn btn-primary btn-sm" %> 
      <%= link_to 'Back', employee_resignations_path,class: 'btn btn-sm btn-default fa fa-arrow-left' %> 
      </div> 
     </div> 
     </div> 
     <% end %> 

     </div> 
    </div> 

jQuery驗證 -

<script> 
$("#employee_resignation").validate({ 
    rules: { 
     "employee_resignation[employee_id]":{ 
     required: true, 
     }, 
     "employee_resignation[resignation_date]":{ 
     required: true, 
     } 
    }, 
    messages: { 
     "employee_resignation[employee_id]":{ 
     required: "Please Select Employee", 
     }, 
     "employee_resignation[resignation_date]":{ 
     required: "Please Select Resignation Date", 
     } 
    }, 
    errorPlacement: function(error, element) { 
    error.css({"color": "red", "font-size": "12px","font-weight" : "normal"}) 
    error.insertAfter(element.parent(element)); 
    } 
    }); 
</script> 

Answer 1

此行添加到您的JavaScript文件：debugger;，並打開調試器爲你喜歡的瀏覽器，然後重新加載頁面，並單擊窗體上。 您將使調試器暫停，您可以使用控制檯查看調用的方法，變量等，然後您可以逐步完成該過程。

調試絕對是您需要的技能，特別是對於JavaScript，所以您不妨投入更多時間，同時解決您的問題。