jQuery验证无法以表格形式进行

Question

我有一种形式，其中Rails和jQuery两种验证均无效。 还有其他方法可以进行验证，因为当我不填写表单的任何字段并单击create button记录时，就会在表中创建。

    <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时，因此您不妨在其中投入更多时间，同时解决您的问题。