jQuery validation is not working in form

Question

I have one form in which rails and jQuery both validations are not working. Is there any other way to put validation, because when I don't fill any fields of the form and click on create button record get created in the table .

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

<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

Add this line to your JavaScript file: debugger; , and open the debugger for your favorite browser, then reload the page and click on the form. You will have the debugger paused and you can use the console to see what methods have been called, variables etc, and then you can step through the process.

Debugging is definitely a skill you need, especially with JavaScript so you might as well invest more time in it, at the same time solving your issue.