Bootstrap 带有 jQuery 验证和 AJAX 的联系表

Question

我有一个简单的 bootstrap 联系表，我正在尝试使用 AJAX 和 jQuery 验证来实现。我觉得我已经很接近了，但有几件事我无法很好地完成工作。表单根据输入进行验证（理想情况下我希望 phone 数字被验证为数字；但是，我是联系人表单验证的新手），但即使答案不是，联系人表单仍会发送正确的。另外，表单提交后总是会弹出成功框...我希望如果填写不正确，则不发送表单，而是出现错误框而不是成功框。此外，电子邮件通过邮件正文发送，但是发送了 none 的变量。所以我的消息正文看起来像：
姓名：
邮箱：
Phone:
留言：

每个后面没有变量出现。

我知道这可能很简单，但我对表单验证还很陌生，我一辈子都弄不明白。

这是表单的 HTML：

<div class="form-group wow fadeInRight" data-wow-delay="1s">
  <div class="controls">
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
      <input type="text" class="form-control" id="name" name="name" placeholder="Name" />
    </div>
  </div>
</div>

<div class="form-group wow fadeInRight" data-wow-delay="1.1s">
  <div class="controls">
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
      <input type="text" class="form-control" id="email" name="email" placeholder="Email" />
    </div>
  </div>  
</div>

<div class="form-group wow fadeInRight" data-wow-delay="1.2s">
  <div class="controls">
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
      <input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" />
    </div>
  </div>
</div>

<div class="form-group wow fadeInRight" data-wow-delay="1.3s">
  <div class="controls">
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
      <textarea name="message" class="form-control " rows="4" cols="78" placeholder="Enter your message here."></textarea>
    </div>
  </div>
</div>

<div id="success"></div>
<div class="row wow fadeInUp" data-wow-delay="1.3s">
  <div class="form-group col-xs-12">
    <div class="contact-btns">
      <input type="submit" class="submit-button" value="Submit" name="submit">
      <input type="reset" class="clear-buttom" value="Clear" name="clear">
    </div>
  </div>
</div>

</form>

这是PHP：

$status = array(
    'type' => 'success',
    'message' => 'Email sent!'
);

$val = $_POST['val'];
$toemail = 'myemail@gmail.com';
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$msg = $_POST['message'];

$subject = 'Thelliotgroup Information Request';

$headers = "From: Thelliotgroup Website :: " . $email . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

$message = "<b>Name: </b>" . $name . "<br>";
$message .='<b>Email: </b>' . $email . "<br>";
$message .='<b>Phone: </b>' . $phone . "<br>";
$message .='<b>Message: </b>' . $msg;

$success = mail($toemail, $subject, $message, $headers);

echo json_encode($status);
die

这是 AJAX 和 jQuery:

var form = $('.contact');
form.submit(function () {
    $this = $(this);
    $.post($(this).attr('action'), function (data) {
        $this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
    }, 'json');
    return false;
});


$.validator.setDefaults({
    submitHandler: function (form) {
        $.ajax({
            type: "POST",
            url: "email.php",
            data: {'val': $(".contact").serializeJSON()}
        }).done(function (data) {
            alert(data);
        });
    }
});

$(".contact").validate(
        {rules:
                    {name: "required",
                        email: {required: true, email: true},
                        phone: "required",
                        message: {required: true, maxlength: 300
                        }},
            errorClass: "error",
            highlight: function (label) {
                $(label).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function (label) {
                label
                        //.text('Seems Perfect!').addClass('valid')
                        .closest('.form-group').addClass('has-success');
            }
        });

非常感谢你们能给我的任何帮助，使它正常工作。

编辑这是新的 jQuery 和 AJAX 代码：

$(document).ready(function() {
var form = $(this); 
var post_url = form.attr('action'); 
$('.contact').validate({ 
    rules: {
        name: {
            rangelength: [2,40], 
            required: true
        },
        email: {
            rangelength: [2,40], 
            email: true,
            required: true
        },
        phone: {
            rangelength: [7,10],
            required: true
        },
        message: {
            minlength: 30,
            required: true
        },
        errorClass:"error",
        highlight: function(label) {
            $(label).closest('.form-group').removeClass('has-success').addClass('has-error');
        },

        success: function(label) {
            label
            .closest('.form-group').addClass('has-success');
        }
    },
    submitHandler: function(form) { 
        $.ajax({
            type: 'POST',
            url: 'email.php',
            data: $(form).serialize(),
            success: function(msg) {
                $('.sent').fadeIn().fadeOut(5000);
            }
        });            
        return false; 
    }                  
});

});

现在我只需要弄清楚如何制作它：

<div class="status alert alert-success" style="display: none"></div>

它位于表单的正上方，一旦提交表单就会淡入。我无法让它工作。

谢谢，布伦南

Answer 1

我不明白你为什么在 jQuery submit 处理函数中执行 .post() (ajax) 而同时你有.ajax() 在插件的 submitHandler 函数中。我不明白。为什么要使用 ajax 两次？

我认为最好删除整个功能...

form.submit(function () {
    $this = $(this);
    $.post($(this).attr('action'), function(data) {
        $this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
    },'json');
    return false;
});

因为它干扰了插件的 submitHandler 功能。

当表单有效时，使用 submitHandler 在按钮 click 上触发代码。 This is where any ajax would belong.

编辑:

您已将 errorClass、highlight 和 success 放入中 rules 选项...

rules: {
    name: {
        ....
    },
    email: {
        ....
    },
    phone: {
        ....
    },
    message: {
        ....
    },
    errorClass:"error",
    highlight: function(label) {
        ....        
    },
    success: function(label) {
        ....
    }
},

这是错误的。 errorClass、highlight 和 success 是 rules 和 submitHandler 选项的兄弟。

此外，在使用 highlight 时，最好同时使用 unhighlight 来撤消您对 highlight 所做的任何操作。

rules: {
    // only your rules here
},
errorClass:"error",
highlight: function(element) {
    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element) {
    $(element).closest('.form-group').addClass('has-success').removeClass('has-error');
},
submitHandler: function(form) { 
    $.ajax({
        // your options
    });            
    return false; 
}

用于清除 Ajax success 选项中的表格...

$('#myform').validate().resetForm(); // reset validation
form[0].reset();                     // clear out the form data

Bootstrap 带有 jQuery 验证和 AJAX 的联系表

Bootstrap Contact Form with jQuery Validation and AJAX

javascript

ajax

jquery

jquery-validate

twitter-bootstrap