Question

我有一张表格，用于发送短信。它一直工作，直到我在验证代码中添加。现在表格不会提交，验证根本不起作用。我在文件中有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.
          }
        });
      }
    })
  });
});

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) {

表单验证不起作用并保持表单不提交

2 个答案: