Форма Валидация не работает и хранит форму от отправки

Question

У меня есть форма, которую я использую для отправки текстов. Он работал до тех пор, пока я не добавил код подтверждения. Теперь форма не будет отправлена, и проверка не будет работать вообще. У меня есть библиотеки jQuery и проверки в файле.

У меня нет ошибок. Он просто ничего не делает, когда я нажимаю submit. Кто-нибудь видит что-либо в моем коде проверки или общем коде, который вызывает эту форму, чтобы не отправлять и/или для проверки не работать?

<form action="" method="POST" id="text-form"> 
     <label>Enter the number to send to 
      <input type="number" name="number" placeholder="Phone Number" class="block" id="number"> 
     </label> 
     <label>Choose their phone service provider 
     <select class="block" id="carrier" name="carrier"> 
      <option></option> 
      <option value="vtext.com">Verizon</option> 
      <option value="vmobl.com">Virgin Mobile</option> 
      <option value="sms.alltelwireless.com">Alltel</option> 
      <option value="txt.att.net">AT&T</option> 
      <option value="sms.myboostmobile.com">Boost Mobile</option> 
      <option value="text.republicwireless.com">Republic Wireless</option> 
      <option value="messaging.sprintpcs.com">Sprint</option> 
      <option value="tmomail.net">T-Mobile</option> 
      <option value="email.uscc.net">U.S. Cellular</option> 
     </select> 
     </label> 
     <textarea placeholder="Your Message" class="block" id="message" name="message"></textarea> 
     <input type="submit" value="Send Text" id="submit-text"> 
     <p id="text-success">Your Message Sent Successfully!</p> 
    </form> 
jQuery(document).ready(function() { 
    $("#submit-text").on("click", function(event) { 
    event.preventDefault(); 

    var number = $("#number").val(); 
    var carrier = $("#carrier").val(); 
    var message = $("#message").val(); 

    $("#text-form").validate({ 
     onfocusout: true, 
     rules: { 
     number: { 
      required: true, 
      minlength: 2 
     }, 
     carrier: { 
      required: true 
     }, 
     message: { 
      required: true, 
      minlength: 2 
     } 
     }, 
     messages: { 
     number: { 
      required: "Please enter the party's phone number.", 
      minlength: "The phone number seems a bit short, doesn't it?" 
     }, 
     carrier: { 
      required: "Please choose their carrier" 
     }, 
     message: { 
      required: "Please enter your message", 
      minlength: "Your message seems a bit short. Please enter at least 2 characters" 
     } 
     }, 
     submitHandler: function(form) { 


     $.ajax({ 
      url: "text-send.php", 
      type: "POST", 
      data: { 
      "number": number, 
      "carrier": carrier, 
      "message": message 
      }, 
      success: function(data) { 
      //console.log(data); // data object will return the response when status code is 200 
      if (data == "Error!") { 
       alert("Unable to send email!"); 
       alert(data); 
      } else { 
       $(".project-container").addClass("removeClass"); 
       $("#text-success").show(); 
       $(".light-gray-container").hide(); 
      } 
      }, 
      complete: function() { 
      $('body, html').animate({ 
       scrollTop: $('#text-success').offset().top 
      }, 'slow'); 
      }, 
      error: function(xhr, textStatus, errorThrown) { 
      alert(textStatus + "|" + errorThrown); 
      //console.log("error"); //otherwise error if status code is other than 200. 
      } 
     }); 
     } 
    }) 
    }); 
}); 

Answer 1

Попробуйте

jQuery(document).ready(function() { 
$("#text-form").validate({ 
    onfocusout: true, 
    rules: { 
    number: { 
     required: true, 
     minlength: 2 
    }, 
    carrier: { 
     required: true 
    }, 
    message: { 
     required: true, 
     minlength: 2 
    } 
    }, 
    messages: { 
    number: { 
     required: "Please enter the party's phone number.", 
     minlength: "The phone number seems a bit short, doesn't it?" 
    }, 
    carrier: { 
     required: "Please choose their carrier" 
    }, 
    message: { 
     required: "Please enter your message", 
     minlength: "Your message seems a bit short. Please enter at least 2 characters" 
    } 
    }, 
    submitHandler: function(form) { 

    var number = $("#number").val(); 
    var carrier = $("#carrier").val(); 
    var message = $("#message").val(); 
    $.ajax({ 
     url: "text-send.php", 
     type: "POST", 
     data: { 
     "number": number, 
     "carrier": carrier, 
     "message": message 
     }, 
     success: function(data) { 
     //console.log(data); // data object will return the response when status code is 200 
     if (data == "Error!") { 
      alert("Unable to send email!"); 
      alert(data); 
     } else { 
      $(".project-container").addClass("removeClass"); 
      $("#text-success").show(); 
      $(".light-gray-container").hide(); 
     } 
     }, 
     complete: function() { 
     $('body, html').animate({ 
      scrollTop: $('#text-success').offset().top 
     }, 'slow'); 
     }, 
     error: function(xhr, textStatus, errorThrown) { 
     alert(textStatus + "|" + errorThrown); 
     //console.log("error"); //otherwise error if status code is other than 200. 
     } 
    }); 
    } 
}); 
}); 

Answer 2

Я думаю, что вы хотите перейти от обработки события щелчка

$("#submit-text").on("click", function(event) { 

для обработки отправки события

$("#text-form").on("submit", function(event) {