jQuery Validierung funktioniert nicht in Form

Question

Ich habe ein Formular, in dem Schienen und jQuery beide Validierungen nicht funktionieren. Gibt es einen anderen Weg, um die Validierung zu setzen, weil, wenn ich keine Felder des Formulars ausfüllen und klicken Sie auf Erstellen Schaltfläche Datensatz in der Tabelle erstellt werden.

<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 Validierung -

<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

Fügen Sie diese Zeile in die JavaScript-Datei: debugger;, und öffnen Sie den Debugger für Ihren Lieblings-Browser, dann die Seite neu zu laden und auf dem Formular klicken. Sie haben den Debugger pausiert und Sie können die Konsole verwenden, um zu sehen, welche Methoden aufgerufen wurden, Variablen usw., und dann können Sie den Prozess durchlaufen.

Debugging ist definitiv eine Fähigkeit, die Sie brauchen, besonders mit JavaScript, also können Sie genauso viel Zeit darin investieren und gleichzeitig Ihr Problem lösen.