主页 / 问题 / 887649
Accepted
siberian
Asked:2020-10-01 16:39:12 +0000 UTC2020-10-01 16:39:12 +0000 UTC

在字段验证和表单提交后显示模式

  • 772

该代码不验证表单字段并立即显示模态窗口：

'use strict';

 $(document).ready(function(){
 $('#FormHeader .submit, #FormFooter .submit').click(function(e) {
    e.preventDefault();
    var form = $(this).parent('form');

    resetError(form);

    if (validateForm(form)) {

        $.ajax({
            type: "POST",
            url: "send.php",
            data: form.serialize(),
            success: function() {
                $('#FormSend').modal();
                $("#FormHeader input, #FormFooter input").val('');
            }
        });
        e.preventDefault();
    }
});

function resetError(container) {
    container.find('.error').removeClass('error');
    container.find('.error-message').remove();
}

function validateForm(form) {
    var inputs = form.find('input'),
        hasError = false;

    inputs.each(function() {
        if (!$.trim($(this).val())) {
            showError($(this).parent('div'), 'Поле не заполнено');
            hasError = true;
        }
    });

    return !hasError;
}

function showError(container, errorMessage) {
    container.addClass('error');
    var msgElem = document.createElement('span');
    msgElem.className = "error-message";
    msgElem.innerHTML = errorMessage;
    container.append(msgElem);
}
 });

PHP

<?php

if (!empty($_POST['name']) && !empty($_POST['phone'])) {

$name = trim(strip_tags($_POST['name']));
$phone = trim(strip_tags($_POST['phone']));


$to = 'mail@gmail.com';


$subject = 'text';
$message = "<p>Имя: $name</p><p>Телефон: $phone</p>";
$headers = "From: $email\r\nReply-to: $email\r\nContent-type:text/html; charset=utf-8\r\n";

mail($to, $subject, $message, $headers);
}

HTML

<form id="FormHeader">

                        <div class="form-control">
                            <label for="Name" hidden="">Имя</label>
                            <input id="Name" type="text" placeholder="Имя" name="name" required="">
                        </div>
                        <div class="form-control">
                            <label for="Phone" hidden="">Телефон</label>
                            <input id="Phone" type="tel" placeholder="Контактный телефон" name="phone" required="">
                        </div>

                        <button type="submit" name="submit" class="btn btn-brand submit" data-toggle="modal">Оставить заявку</button>
                    </div>
                </form>
php

1 个回答

  1. Best Answer

    解决方案：

    'use strict';

 $(document).ready(function(){
 $('#FormHeader, #FormFooter').submit(function(e) {
e.preventDefault();
var form = $(this);

resetError(form);

if (validateForm(form)) {

  $('#modalForm').modal();
  $("#FormHeader input, #FormFooter input").val('');
}
});

function resetError(container) {
container.find('.error').removeClass('error');
container.find('.error-message').remove();
}

function validateForm(form) {
var inputs = form.find('input'),
    hasError = false;

inputs.each(function() {
    if (!$.trim($(this).val())) {
        showError($(this).parent('div'), 'Поле не заполнено');
        hasError = true;
    }
});

return !hasError;
}

function showError(container, errorMessage) {
container.addClass('error');
var msgElem = document.createElement('div');
msgElem.className = "error-message";
msgElem.innerHTML = errorMessage;
container.append(msgElem);
}
});
    • 0

相关问题