表单验证不起作用,并阻止表单提交

Form Validation not working and keeping form from submitting

本文关键字:表单提交 验证 不起作用 表单      更新时间:2023-09-26

我有一个用来发送文本的表单。它一直工作到我添加验证代码。现在,表单不会提交,并且验证根本不起作用。我在文件中有jQuery和验证库。

我没有收到任何错误。当我点击提交时,它什么都不做。是否有人在我的验证代码或通用代码中看到导致此表单无法提交和/或验证不起作用的任何内容?

<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.
          }
        });
      }
    })
  });
});

试试这个

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.
      }
    });
  }
});
});

我认为您想更改处理点击事件

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

处理提交事件

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