Question

我有一个需要使用jquery验证的电子邮件表单。我不能使用内置的HTML5属性，因为表单将由JS函数提交，以避免重新加载页面。表格验证正常。但是在提交时，数据将作为GET请求发送。如果我从JS函数中删除验证，数据将作为POST发送，一切正常。此外，这不是一个问题（只是好奇），当我尝试验证单个表单元素时，其他表单元素也会自动验证。例如，我有一个名称和电子邮件的字段。如果我尝试仅验证名称，则电子邮件也会得到验证。有点好奇为什么会发生这种情况。这是我的JS代码： var main = function（）{

$('#submitButton').click(function() { 

    // $('#form')[0].checkValidity();
    // $('#form')[1].checkValidity();
    // if(!$('#form')[0].checkValidity()) {
    //   code here
    // }
    // if(!$('#form')[1].checkValidity()) {
    //   code here
    // }

    // var form = $('#form');
    // form.validate();
    // if(form.valid()) {
    //  //code here
    // }

    // if ($('#name').val.equal('')) {          //even this causes the same problem!!
    //  return;
    // };
    // if ($('#email').val.equal('')) {
    //  return;
    // };

    // if( document.form.name.value == "" )
    // {
    //  alert( "Please provide your name!" );
    //  document.form.name.focus() ;
    //  return;
    // }

    var name = $('#name').val();
    var email = $('#email').val();
    var number1 = $('#number1').val();
    var number2 = $('#number2').val();
    var company= $('#company').val();
    var designationText= $('#designationText').val();
    var message = $('#message').val();

    var messageToSend = "Name: " + name + "\nEmail: " + email + "\nLandline: " +    //have to use double quotes since PHP detects  
        number1 + "\nCell Phone: " + number2 + "\nCompany: " + company +            //escape sequences like \n only in double quotes
        "\nDesignation: " + designationText + "\nMessage: " + message;

    var dataString = "Name=" + name + "&Email=" + email + "&MessageToSend=" + messageToSend;

    $.ajax({
        type: "post",
        url: "php/mail.php",
        data: dataString,
        success: function() {
          $('.form').hide()
          $('#changingText').text("Thank you. We will be in touch with you shortly " + name)
        }
    });

    return false;

});
}

$(document).ready(main);

我已经尝试了所有注释掉的方法来验证表单数据，然后将其提交给PHP脚本。但我一直有同样的问题。数据以GET形式发送。这是我的HTML代码：

<div class="contact" id="contact">
        <div class="container">
            <h4 id="changingText">Enquiry Form</h4>

            <form class="form" id="form" action="" method="" role="form" autocomplete="on">
              <div class="form-group">
                <input type="text" class="form-control" required name="name" id="name" placeholder="First & Last name">
              </div>
              <div class="form-group">
                <input type="email" class="form-control" required name="email" id="email" placeholder="Email">
              </div>
              <div class="form-group">
                <input type="tel" class="form-control" name="number1" id="number1" placeholder="Landline number">
              </div>
              <div class="form-group">
                <input type="tel" class="form-control" name="number2" id="number2" placeholder="Mobile number">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" name="company" id="company" placeholder="Company Name">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" name="designationText" id="designationText" placeholder="Designation">
              </div>
              <div class="form-group" autocomplete="off">
                <textarea class="form-control" name="message" id="message" rows="6" cols="10" placeholder="Enter Message"></textarea>
              </div>
              <button type="submit" class="btn btn-default" id="submitButton">Submit</button>
            </form>

        </div>
    </div>

所以我基本上要做的是使用jquery验证表单，如果所有数据都有效，请将其发送到PHP脚本（使用POST），如图所示。如果我留下这些东西评论，一切都很完美，但没有验证。对不起，如果我的代码不太好。我是初学者。

Answer 1

不要将click事件处理程序附加到提交按钮，而是尝试将提交事件处理程序附加到表单本身。这样您就可以处理submit事件，并阻止表单通过stopPropagation()和preventDefault()提交任何未经验证的数据

$('#form').on('submit', function(ev) {

    // prevent from auto-submitting  
    ev.preventDefault();
    ev.stopPropagation();

    // validate; if something is wrong handle it;
    if ($('#name').val() === "") {
        alert("You don't have a name? :(");
        return;
    }

    // if all is good, then submit.
    $.ajax({
        type: "post",
        url: "php/mail.php",
        data: dataString,
        success: function() {
          $('.form').hide()
          $('#changingText').text("Thank you. We will be in touch with you shortly " + name)
        }
    });

});

return false;应该完全按照ev.preventDefault();和ev.stopPropagation();的要求行事，但明确表达并不会有害。：）

当我指定POST时，jquery表单验证使用GET

1 个答案: