验证表单ajaxphp_Php_Jquery_Ajax

验证表单ajaxphp

php jquery ajax

验证表单ajaxphp,php,jquery,ajax,Php,Jquery,Ajax,jQuery/JavaScript/Ajax代码不是我的。我正在学习并试图理解它。我遇到的问题是，在数据被发送到数据库之后，表单应该将class=“show”添加到#sendmages，但它将class=“show”添加到#errormessage，即使它成功并且数据已输入数据库。我不明白为什么或者如何修复它联系表单index.html <div class="form"> <div id="sendmessage">Your

jQuery/JavaScript/Ajax代码不是我的。我正在学习并试图理解它。我遇到的问题是，在数据被发送到数据库之后，表单应该将

class=“show”

添加到

#sendmages

，但它将

class=“show”

添加到

#errormessage

，即使它成功并且数据已输入数据库。我不明白为什么或者如何修复它

联系表单index.html

 <div class="form">
                    <div id="sendmessage">Your message has been sent. Thank you!</div>
                    <div id="errormessage"></div>
                    <form action="contactform/contactform.php" method="POST" role="form" class="contactForm">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                                <div class="validation"></div>
                            </div>
                            <div class="form-group col-md-6">
                                <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                                <div class="validation"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:8" data-msg="Please enter at least 8 chars of subject" />
                            <div class="validation"></div>
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
                            <div class="validation"></div>
                        </div>
                        <div class="text-center"><button type="submit">Send Message</button></div>
                    </form>
                </div>


您的邮件已发送。非常感谢。
发送消息

contactform.js

jQuery(document).ready(function($) {
  "use strict";

  //Contact
  $('form.contactForm').submit(function() {
    var f = $(this).find('.form-group'),
      ferror = false,
      emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;

    f.children('input').each(function() { // run all inputs

      var i = $(this); // current input
      var rule = i.attr('data-rule');

      if (rule !== undefined) {
        var ierror = false; // error flag for current input
        var pos = rule.indexOf(':', 0);
        if (pos >= 0) {
          var exp = rule.substr(pos + 1, rule.length);
          rule = rule.substr(0, pos);
        } else {
          rule = rule.substr(pos + 1, rule.length);
        }

        switch (rule) {
          case 'required':
            if (i.val() === '') {
              ferror = ierror = true;
            }
            break;

          case 'minlen':
            if (i.val().length < parseInt(exp)) {
              ferror = ierror = true;
            }
            break;

          case 'email':
            if (!emailExp.test(i.val())) {
              ferror = ierror = true;
            }
            break;

          case 'checked':
            if (! i.is(':checked')) {
              ferror = ierror = true;
            }
            break;

          case 'regexp':
            exp = new RegExp(exp);
            if (!exp.test(i.val())) {
              ferror = ierror = true;
            }
            break;
        }
        i.next('.validation').html((ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
      }
    });
    f.children('textarea').each(function() { // run all inputs

      var i = $(this); // current input
      var rule = i.attr('data-rule');

      if (rule !== undefined) {
        var ierror = false; // error flag for current input
        var pos = rule.indexOf(':', 0);
        if (pos >= 0) {
          var exp = rule.substr(pos + 1, rule.length);
          rule = rule.substr(0, pos);
        } else {
          rule = rule.substr(pos + 1, rule.length);
        }

        switch (rule) {
          case 'required':
            if (i.val() === '') {
              ferror = ierror = true;
            }
            break;

          case 'minlen':
            if (i.val().length < parseInt(exp)) {
              ferror = ierror = true;
            }
            break;
        }
        i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
      }
    });
    if (ferror) return false;
    else var str = $(this).serialize();
    var action = $(this).attr('action');
    if( ! action ) {
      action = 'contactform/contactform.php';
    }
    $.ajax({
      type: "POST",
      url: action,
      data: str,
      success: function(msg) {
         //alert(msg);
        if (msg == 'OK') {
          $("#sendmessage").addClass("show");
          $("#errormessage").removeClass("show");
          $('.contactForm').find("input, textarea").val("");
        } else {
          $("#sendmessage").removeClass("show");
          $("#errormessage").addClass("show");
          $('#errormessage').html(msg);
        }

      }
    });
    return false;
  });

});

jQuery（文档）.ready（函数（$）{
“严格使用”；
//接触
$（'form.contactForm'）。提交（函数（）{
var f=$（this.find（'.form group'），
ferror=false，
emailExp=/^[^\s（）@；：\/]+@\w[\w\.-]+\.[a-z]{2，}$/i；
f、 子项（'input'）。每个（函数（）{//运行所有输入
var i=$（this）；//当前输入
var规则=i.attr（“数据规则”）；
如果（规则！==未定义）{
var ierror=false；//当前输入的错误标志
var pos=rule.indexOf（“：”，0）；
如果（位置>=0）{
var exp=rule.substr（位置+1，rule.length）；
rule=rule.substr（0，位置）；
}否则{
规则=规则.substr（位置+1，规则.length）；
}
开关（规则）{
案例“必需”：
如果（i.val（）==''）{
ferror=ierror=true；
}
打破
案例“minlen”：
if（i.val（）.length=0）{
var exp=rule.substr（位置+1，rule.length）；
rule=rule.substr（0，位置）；
}否则{
规则=规则.substr（位置+1，规则.length）；
}
开关（规则）{
案例“必需”：
如果（i.val（）==''）{
ferror=ierror=true；
}
打破
案例“minlen”：
if（i.val（）.length


contactform.php
<?php
//Define access
define('_VALID', 'Yes');
//required files
require_once('../include/config/config.php');

//variables
$contactFormName = '';
$contactFormEmail = '';
$contactFormSubject = '';
$contactFormMessage = '';
$checkStep = 1;

//Add new message
if (isset($_POST['name'])){ 


        //Get values
        $contactFormName = $_POST['name'];
        $contactFormEmail = $_POST['email'];
        $contactFormSubject = $_POST['subject'];
        $contactFormMessage = $_POST['message'];


        // 1. check name form field
        if($checkStep == 1){
            if($contactFormName === $_POST['name']){
                $contactFormName = filterName($contactFormName);
                $checkStep++;

            }else{
                echo "No its not working";
            }
        }
            // 2. check email field
            if($checkStep == 2){
                if($contactFormEmail === $_POST['email']){
                    $contactFormEmail = filterEmail($contactFormEmail);
                    $checkStep++;
                }else{
                        echo "Uh Oh! Something went wrong with your email please try again!";
                    }
                }

            // 3. check subject
            if($checkStep == 3){
                if($contactFormSubject === $_POST['subject']){
                    $contactFormSubject = filterSubject($contactFormSubject);
                    $checkStep++;
                }else{
                    echo "Uh Oh! Whats up with your subject";
                }
            }
            // 4. check message
            if($checkStep == 4){
                 if($contactFormMessage === $_POST['message']){
                    $contactFormMessage = filterMessage($contactFormMessage);
                     $checkStep++;
                }else{
                    echo "Uh ho!  Please write us a message";
                }
            }
            // 5. insert message
            if($checkStep == 5){
                $sqlAddMessage = "
                    INSERT INTO contact_form(
                        name,
                        email,
                        subject,
                        message
                    ) VALUES(
                        '$contactFormName', 
                        '$contactFormEmail', 
                        '$contactFormSubject', 
                        '$contactFormMessage'
                    )
                ";
                $queryAddMessage = $GLOBALS['mysqli']->query($sqlAddMessage);

                if($queryAddMessage){

                //code goes here
                }


            }else{
                echo "Uh Oh! NO No No. Check step 5";
            }
        }


?>




问题在于，您没有在函数中的任何位置设置$msg=“OK”，因此AJAX响应总是指向else语句
contactform.php（在//5.节中）
您应该在php中将js检查的消息作为OK进行回显
if($queryAddMessage){

                //code goes here
                echo 'OK';
 }

只需使用jQuery表单验证插件来验证表单，这比使用AJAX验证表单要简单。
只要告诉您的php，如果插入顺利，请响应OK
。现在，它什么也没说，这就是为什么它一直在ajax成功中转到您的else
语句的原因block@Kevin你能给我举个例子吗？我仍在学习这方面的知识。我尝试了if（$queryAddMessage）{echo“OK”；}
，我也尝试了if（$queryAddMessage）{$msg='OK'；}，结果相同，即使数据被发送到数据库，它仍然会发送到else语句。
if($queryAddMessage){

                //code goes here
                echo 'OK';
 }