Попытка проверить форму с помощью JQuery, но оно не работает

Question

<div class="login-form-1"> 
     <form action="" method="post" id="register-form" novalidate="novalidate" class="text-left"> 
      <div class="login-form-main-message"></div> 
      <div class="main-login-form"> 
       <div class="login-group"> 
        <div class="form-group"> 
         <label for="reg_username" class="sr-only">Username</label> 
         <input type="text" class="form-control" id="reg_username" name="reg_username" placeholder="username"> 
        </div> 
        <div class="form-group"> 
         <label for="reg_password" class="sr-only">Password</label> 
         <input type="password" class="form-control" id="reg_password" name="reg_password" placeholder="password"> 
        </div> 
        <div class="form-group"> 
         <label for="reg_password_confirm" class="sr-only">Password Confirm</label> 
         <input type="password" class="form-control" id="reg_password_confirm" name="reg_password_confirm" placeholder="confirm password"> 
        </div> 

        <div class="form-group"> 
         <label for="reg_email" class="sr-only">Email</label> 
         <input type="text" class="form-control" id="reg_email" name="reg_email" placeholder="email"> 
        </div> 


        <div class="form-group login-group-checkbox"> 
         <input type="radio" class="" name="reg_gender" value="male" > 
         <label for="male">male</label> 

         <input type="radio" class="" name="reg_gender" value="female" > 
         <label for="female">female</label> 
        </div> 


        <div class="form-group"> 
        <select class="form-control" name = "reg_security" id="select"> 
          <option class="others">What is the name of your favorite cartoon character?</option> 
          <option class="others">What was the name of your primary school?</option> 
          <option class="others">What is the name of your best friend?</option> 
          <option class="others">What was the name of your first cell phone?</option> 
        </select> 
        </div> 

        <div class="form-group"> 
        <input class="form-control" id="focusedInput" type="text" value="Your answer..."> 
        </div> 

       </div> 

       <button type="submit" class="login-button"><i class="fa fa-chevron-right"></i></button> 

/* Это соответствующий JS файл с именем, как action.js */

(function($) { 
    "use strict"; 

    // Options for Message 
    //---------------------------------------------- 
    var options = { 
     'btn-loading': '<i class="fa fa-spinner fa-pulse"></i>', 
     'btn-success': '<i class="fa fa-check"></i>', 
     'btn-error': '<i class="fa fa-remove"></i>', 
     'msg-success': 'All Good! Redirecting...', 
     'msg-error': 'Wrong login credentials!', 
     'useAJAX': true, 
    }; 


    // Register Form 
    //---------------------------------------------- 
    // Validation 
    $("#register-form").validate({ 
    rules: { 
     reg_username: "required", 
     reg_password: { 
      required: true, 
      minlength: 5 
     }, 
     reg_password_confirm: { 
      required: true, 
      minlength: 5, 
      equalTo: "#register-form [name=reg_password]" 
     }, 
     reg_email: { 
     required: true, 
      email: true 
     }, 
     reg_agree: "required", 
    }, 
     errorClass: "form-invalid", 
     errorPlacement: function(label, element) { 
     if(element.attr("type") === "checkbox" || element.attr("type") === "radio") { 
      element.parent().append(label); // this would append the label after all your checkboxes/labels (so the error-label will be the last element in <div class="controls">) 
     } 
      else { 
     label.insertAfter(element); // standard behaviour 
     } 
    } 
    }); 

    // Form Submission 
    $("#register-form").submit(function() { 
    remove_loading($(this)); 

     if(options['useAJAX'] == true) 
     { 
      // Dummy AJAX request (Replace this with your AJAX code) 
      // If you don't want to use AJAX, remove this 
     dummy_submit_form($(this)); 

      // Cancel the normal submission. 
      // If you don't want to use AJAX, remove this 
     return false; 
     } 
    }); 



    // Loading 
    //---------------------------------------------- 

}); 

Аналогично есть файл CSS слишком для укладки. Проблема в том, что функция validate не работает над формой. Я что-то не так? Я попытался поставить скрипт в html & в отдельный файл. И все же он не работает.

Answer 1

Удалить весь пользовательский обработчик .submit(), потому что это вмешательство в нормальную работу плагина, блокируя submit событие ...

$("#register-form").submit(function() { .... 

Тогда любой ajax бы только внутри the plugin's submitHandler function ...

$("#register-form").validate({ 
    submitHandler: function(form) { 
     // ajax here! 
     return false; 
    }, 
    rules: { 
     reg_username: "required", 
     .... 

Заменяет отправную точку по умолчанию. Правильное место, чтобы отправить форму через Ajax после ее проверки.