Question

我正在尝试将表单发送到电子邮件，但我希望验证名称字段（如果没有内容则不发送）我无法验证它，然后通过我正常工作的PHP脚本结束 I have created a jsfiddle at the following link 有人可以帮忙吗？

$(document).ready(function () {
$('.form-horizontal').on('submit', function (e) {

    e.preventDefault();
    var name = $('#name').val();
    if (!name) {
        showError();
    }
    else {
        $('#contact-form').submit();
    }

});

function showError() {

    $('.tyler-error').show();
}

});

Answer 1

Working fiddle

在你的小提琴中，你没有从库下拉列表中选择jQuery。

其次，您应该避免在提交处理程序中提交表单，而只是在出现验证错误时阻止默认。

$('.form-horizontal').on('submit', function (e) {
    var name = $('#name').val();
    if (!name) {
        showError();
        e.preventDefault();
    }
});

如果你真的想保持代码不变，你需要调用表单提交函数，而不是jQuery提交函数：

$('#contact-form')[0].submit();
// or
$('#contact-form').get(0).submit();

在这里，[0]或.get(0)为您提供了没有jQuery包装器的纯JavaScript DOM元素，您可以调用submit()。

Answer 2

HTML5提供输入验证，您可以设置以告诉浏览器您的HTML视图是HTML5。

//Set your doctype for HTML5.
<!doctype html>
<html>
<head>
    <title></title>
</head>
<body>
    <form id="the_form">
        //here html5 will not submit if the box is empty or does not meet the email
        //addres format.
        <input type="email" name="email" id="email" placeholder="Enter email..">
        <input type="submit" value="send">
    </form>
</body>
</html>

如果你不想使用HTML5，你也可以制作一个简单的javascript代码，如果输入为空则不提交。

<html>
<head>
    <title></title>
    <script type="text/javascript">
    window.onload = init();

    function init(){
        //get form.
        var form = document.getElementById("the_form");

        form.onsubmit = email_validation;
    }

    function email_validation(){
        email = document.getElementById("email");

        if(email.value == ''){
            //return false to avoid submission.

            return false;
        }
        else{
            //do whatever code.
        }
    }
    </script>
</head>
<body>
    <form id="the_form">
        <input type="text" name="email" id="email" placeholder="Enter email..">
        <input type="submit" value="send">
    </form>
</body>
</html>

通过这种方式，您的电子邮件将在发送之前得到验证，希望这对您有用。

需要在发送前验证表格

2 个答案: