logo标签列表

如何使用纯JavaScript而不是jQuery来使用AJAX提交此表单

javascriptphpajaxformsvalidation
13

我到处查找，但只找到jQuery相关的内容。

在Stack Overflow这些伟大的思想家们的帮助下，我终于让我的表单验证通过了（目前只是客户端验证，因为这是一个任务）。现在我需要使用AJAX将表单提交到一个PHP文件。

我的要求是验证它是通过AJAX调用的，验证所有必填字段都有值，并返回一个成功状态，包括处理它的服务器时间。

JSfiddle

表单动作现在为空，仅用于测试，但最终将调用以下代码中的form.php。

HTML

<form id="contact" name="contact" onsubmit="return validateFormOnSubmit(this)" action="" method="post">
    <div>
        <label>First Name</label>
        <input placeholder="First Name" type="text" name="name" id="name" tabindex="1" autofocus />
        <div id="name-error" class="error"></div>
    </div>
    <div>
        <label>Nickname</label>
        <input placeholder="Nickname" type="text" name="nickname" id="nickname" tabindex="2" autofocus />
    </div>
    <div>
        <label>Email</label>
        <input placeholder="Email" type="email" name="email" id="email" tabindex="3" autofocus />
        <div id="email-error" class="error"></div>
    </div>
    <div>
        <label>Phone</label>
        <input placeholder="Phone" type="tel" name="phone" id="phone" tabindex="4" autofocus />
        <div id="phone-error" class="error"></div>
    </div>
    <div>
        <label>I prefer</label>
        <input type="radio" name="pet" id="Dogs" tabindex="5" autofocus />Dogs
        <input type="radio" name="pet" id="Cats" tabindex="6" autofocus />Cats
        <input type="radio" name="pet" id="Neither" tabindex="7" autofocus />Neither
        <div id="pet-error" class="error"></div>
    </div>
    <div>
        <label>My favorite number between 1 and 50</label>
        <input placeholder="Favorite number between 1 and 50" type="text" name="number" id="number" tabindex="8" autofocus />
        <div id="number-error" class="error"></div>
    </div>
    <div>
        <label>Disclaimer</label>
        <input type="checkbox" name="disclaimer" id="disclaimer" tabindex="9" autofocus />I confirm that all the above information is true.
        <div id="disclaimer-error" class="error"></div>
    </div>
    <div>
        <button type="submit" name="submit" id="submit" tabindex="10">Send</button>
    </div>
</form>

JavaScript

function validateFormOnSubmit(contact) {
    reason = "";
    reason += validateName(contact.name);
    reason += validateEmail(contact.email);
    reason += validatePhone(contact.phone);
    reason += validatePet(contact.pet);
    reason += validateNumber(contact.number);
    reason += validateDisclaimer(contact.disclaimer);

    console.log(reason);
    if (reason.length > 0) {

        return false;
    } else {
        return false;
    }
}

// validate required fields
function validateName(name) {
    var error = "";

    if (name.value.length == 0) {
        name.style.background = 'Red';
        document.getElementById('name-error').innerHTML = "The required field has not been filled in";
        var error = "1";
    } else {
        name.style.background = 'White';
        document.getElementById('name-error').innerHTML = '';
    }
    return error;
}

// validate email as required field and format
function trim(s) {
    return s.replace(/^\s+|\s+$/, '');
}

function validateEmail(email) {
    var error = "";
    var temail = trim(email.value); // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/;
    var illegalChars = /[\(\)\<\>\,\;\:\\\"\[\]]/;

    if (email.value == "") {
        email.style.background = 'Red';
        document.getElementById('email-error').innerHTML = "Please enter an email address.";
        var error = "2";
    } else if (!emailFilter.test(temail)) { //test email for illegal characters
        email.style.background = 'Red';
        document.getElementById('email-error').innerHTML = "Please enter a valid email address.";
        var error = "3";
    } else if (email.value.match(illegalChars)) {
        email.style.background = 'Red';
        var error = "4";
        document.getElementById('email-error').innerHTML = "Email contains invalid characters.";
    } else {
        email.style.background = 'White';
        document.getElementById('email-error').innerHTML = '';
    }
    return error;
}

// validate phone for required and format
function validatePhone(phone) {
    var error = "";
    var stripped = phone.value.replace(/[\(\)\.\-\ ]/g, '');

    if (phone.value == "") {
        document.getElementById('phone-error').innerHTML = "Please enter a phone number";
        phone.style.background = 'Red';
        var error = '6';
    } else if (isNaN(parseInt(stripped))) {
        var error = "5";
        document.getElementById('phone-error').innerHTML = "The phone number contains illegal characters.";
        phone.style.background = 'Red';
    } else if (stripped.length < 10) {
        var error = "6";
        document.getElementById('phone-error').innerHTML = "The phone number is too short.";
        phone.style.background = 'Red';
    } else {
        phone.style.background = 'White';
        document.getElementById('phone-error').innerHTML = '';
    }
    return error;
}

function validatePet(pet) {
    if ((contact.pet[0].checked == false) && (contact.pet[1].checked == false) && (contact.pet[2].checked == false)) {
        document.getElementById('pet-error').innerHTML = "Pet required";
        var error = "2";
    } else {
        document.getElementById('pet-error').innerHTML = '';
    }
    return error;
}

function validateNumber(number) {
    var num = document.forms["contact"]["number"];
    var y = num.value;
    if (!isNaN(y)) {

        //alert('va');

        if (y < 0 || y > 50) {
            //Wrong
            number.style.background = 'Red';
            document.getElementById("number-error").innerHTML = "Must be between 0 and 50.";
            var error = "10";
        } else {
            //Correct
            number.style.background = 'White';
            document.getElementById("number-error").innerHTML = "";
        }
        return error;
    } else {
        document.getElementById("number-error").innerHTML = "Must be a number.";
        var error = "3";
    }
    return error;
}

function validateDisclaimer(disclaimer) {
    var error = "";

    if (document.getElementById("disclaimer").checked === false) {
        document.getElementById('disclaimer-error').innerHTML = "Required";
        var error = "4";
    } else {
        document.getElementById('disclaimer-error').innerHTML = '';
    }
    return error;
}

PHP

→

PHP

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$from = 'From: TangledDemo'; 
$to = 'myemail@domain.com'; 
$subject = 'Hello';
$message = "This is a message.";

if ($_POST['submit']) {              
    if (mail ($to, $subject, $message)) { 
        echo '<p>Your message has been sent!</p>';
} else { 
    echo '<p>Something went wrong, go back and try again!</p>'; 
} 
}
?>

谢谢！

你不想使用jQuery的原因是什么？ - Nunners
2
@Nunners 可能是由分配定义的，对吗 @justinae？ - Bill
@BillyMathews 我没注意到这是一个作业，我的错哈哈。 - Nunners
1
尽管我想说“也许他不想包含任何库”或“也许他只是喜欢纯JS”，但看到“我更喜欢”狗，“猫”，“都不喜欢”单选按钮，我感觉这不是情况。 - FreshPro
@BillyMathews 正确！ - justinae
3个回答
21

以下是如何通过 Ajax 提交表单的方法：

function submitFormAjax() {
    let xmlhttp= window.XMLHttpRequest ?
        new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200)
            alert(this.responseText); // Here is the response
    }

    let name = document.getElementById('name').innerHTML;
    let email = document.getElementById('email').innerHTML;

    xmlhttp.open("GET","your_url.php?name=" + name + "&email=" + email, true);
    xmlhttp.send();
}

这个例子使用GET请求，但你也可以使用POST请求：

xmlhttp.open("POST","your_url.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=" + name + "&email=" + email);

注意：

在validateFormOnSubmit无错误后，你必须调用submitFormAjax()方法，如下所示：

if (reason.length == 0) {
    // Show some loading image and submit form
    submitFormAjax();
} else {
    return false;
}
1
好的@BillyMathews！我不知道那个...我已经删除了引用 :) - António Almeida
1
@ToniAlmeida 谢谢你的帮助。我现在会开始测试了。我需要为每个要提交的字段添加“var name = document.getElementById('name').innerHTML;”吗？还是只需要添加必需的字段？所以这里的要点是ValidateForm先运行，把所有错误都解决掉，然后submitForAjax运行并基本上将整个表单提交到form.php而不需要刷新页面？我仍在理解AJAX。BillyMathews 我之前不知道W3schools。感谢你的提醒。 - justinae
@justinae，没错，首先你要验证所有内容，然后使用所有必需的参数提交表单！而 AJAX 允许你在不刷新页面的情况下完成这个过程！ - António Almeida
1
你不需要这样做，只需将每个值作为参数添加到 xmlhttp.open("GET" ... 中即可（除非您的页面中有多个表单，是吗？） - António Almeida
正确！这被称为查询字符串，PHP将接收这些变量：$_GET['name'] $_GET['email']等... - António Almeida
显示剩余15条评论
4
在现代浏览器中，你可以用几行代码使用 fetch ：
fetch(form.action, {
  method: form.method,
  body: new URLSearchParams(new FormData(form)),
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
});

如果您不喜欢从StackOverflow复制粘贴代码，我还将其发布为更为复杂的npm包：push-form

1
formElem.onsubmit = async (e)  =>
{
    var url = document.getElementById("formElem").getAttribute("action");
    e.preventDefault();
    var data =  new FormData(formElem);
    data.append("submit", "Submit");
    let response = await fetch(url, 
    {
        method: 'POST',
          body: data
    });
    let result = await response.json();
    document.getElementById("field").value = "";
    document.getElementById('charNum').innerHTML="0";
    setTimeout(function autoscroll(){
    var div = document.getElementById('loadmsg');
    div.scrollTop = div.scrollHeight - div.clientHeight; 
    },1000);
  
  };
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接