Question

我需要在发送数据之前进行验证

我的HTML：

<section id="contacts" class="section-block">
    <div class="container">
        <div class="row">
        <p class="section-header text-center">Хотите задать вопрос?</p>
        <div class="separator center-block"></div>
            <p class="section-after-header text-center">Мы ответим не позже следующего рабочего дня</p>
            <form id="contactForm">
            <div class="form-group">
                <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Ваше имя" />
            </div>
            <div class="form-group">
                <input type="email" class="form-control" name="InputEmail" id="InputEmail"  placeholder="Ваш e-mail" />
            </div>
            <div class="form-group">
                <input type="text" id="questioninput" class="form-control" name="InputQuestion" id="InputQuestion"  placeholder="Вопрос" />
            </div>
            <div id="success"> </div>
                <button type="submit_m" id="submit" class="btn btn-yellow center-block">Задать вопрос</button>
            </form>
        </div>
    </div>
</section>

JS / jquery的

$(document).ready(function() {
    $("#submit").click(function() {
        var name = $("#InputName").val();
        var email = $("#InputEmail").val();
        var text = $("#InputQuestion").val();

        $.ajax({
        type: "POST",
        url: "<y:base />/tmpls/hb.theme/sendemail.php",
        data: {name: name, email: email, text: text},
        success: function() {
            $('#success').html("<div class='alert alert-success' style='margin-bottom: 15px;'>");
            $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true' style='font-size: 15px;font-family: Geneva, Arial, Helvetica, sans-serif;'>&times;")
            .append( "</button>");
            $('#success > .alert-success').append("Ваш запрос отправлен. Мы перезвоним вам в ближайшее время!");
            $('#success > .alert-success').append('</div>');
            $('#contactForm').trigger("reset");
        },
        error: function() {
            $('#success').html("<div class='alert alert-danger'>");
            $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true' style='font-size: 15px;font-family: Geneva, Arial, Helvetica, sans-serif;'>&times;").append( "</button>");
            $('#success > .alert-danger').append("Кажется у нас что-то поломалось. Пожалуйста, напишите нам по почте и мы вам сразу же ответим. Спасибо!");
            $('#success > .alert-danger').append('</div>');
            $('#contactForm').trigger("reset");
        },
        });
    });
});

php

<?
if((isset($_POST['name'])&&$_POST['name']!="")&&(isset($_POST['email'])&&$_POST['email']!="")){
    $to = 'asd@asd.ru';
    $subject = 'Вопрос с главной страницы';
    $val = array(
                 'name' => strip_tags(@$_POST['name']),
                 'email' => strip_tags(@$_POST['email']),
                 'text' => strip_tags(@$_POST['text'])
                 );

    $message = "Вопрос на главной странице сайта\nИмя клиента: {$val['name']}\nEmail: {$val['email']}\nВопрос: {$val['text']}";
    $headers  = "Content-type: text/html; charset=utf-8 \r\n"; /
    $headers .= "From: www.asd.ru <asd@asd.ru>\r\n";
    mail($to, $subject, $message, $headers);
}
?>

我想使用validate.js或任何其他代码来帮助我显示未填写字段或电子邮件看起来不像电子邮件的消息。

问题是，如果我使用标准引导程序验证（必需=＆＃39; true＆＃39;），则单击事件表单即使字段未填充也会发送。如果我在提交事件上使用它更新页面（它是长页面，更新后打开页面顶部，但不是成功消息的联系表格）

Answer 1

在执行任何操作之前，您需要阻止提交按钮的默认操作，如下所示：

$("#submit").click(function(e) {
e.preventDefault();
// validation code goes here
  // return true if validation is successful and proceed to ajax
});

如何通过验证制作ajax表单

1 个答案: