4

我正在尝试使用 HTML5 模式和 jQuery 验证 simpla 联系表单，如下所示：

<form action="test.php" method="post" id="myForm">
  <input type="text" name="name"   id="name"   class="form-control"  pattern="[A-Za-z ]+" autofocus placeholder=" Please Enter Your Name" >
  <input type="tel"  name="phone"  id="phone"  class="form-control"  pattern="\d{3}[\-]\d{3}[\-]\d{4}" autofocus  placeholder="xxx-xxx-xxxx"  >

  <button type="submit" name="submit">Send Email</button>
</form>

这是我用来验证字段是否为空的 jquery 代码：

$(document).ready(function () {
        $('#myform').submit(function () {
            var abort = false;
            $("div.alert").remove();
            $('input[type="text"]').each(function () {
                if ($(this).val() === '') {
                    $(this).after('<div class="err"><p>Phone Field Cant be Empty</p></div>');
                    abort = true;
                }
            }); // go through each required value
            if (abort) {
                return false;
            } else {
                return true;
            }
        }) //on submit
}); // ready

但无论出于何种原因，它都没有验证表格！你能告诉我我在这里做错了什么吗？

4

2 回答 2

2

根本不需要JS /jQuery。一切都可以使用 HTML5 进行验证。

在输入字段中使用required以确保值不为空并用于pattern检查内容（就像您已经做过的那样）。

<input ... required>

HTML

<?php 
    /* The form is POSTed to the same page to check the sumitted values */
    print_r($_POST); 
?>

<form action="" method="post" id="myForm">
    <input type="text" name="name" id="name" class="form-control" pattern="[A-Za-z ]+" autofocus placeholder="Please Enter Your Name" required>
    <input type="tel" name="phone" id="phone" class="form-control" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="xxx-xxx-xxxx" required>
    <button type="submit" id="send">Send Email</button>
</form>

最佳实践也是使用on, as in $("#element").on("click", function(){，而不是.click(function(){or .submit(function(){。

于 2013-11-08T08:36:45.670 回答
0 
if ($(this).val() == '') {
    $('<div class="alert"><p>Phone Field Cant be Empty</p></div>').insertAfter($(this));

    abort = true;
}

我提供了新div课程alert，因为您在验证之前删除了错误的元素。

我修改了逻辑以检查值是否等于 false，不等于空字符串，以防value甚至没有设置属性（你永远不能太小心）。

您还使用after()which 获取元素的下一个兄弟元素并且不插入任何内容。

完整代码：

$(document).ready(function () {
        $('#myform').submit(function () {
            var valid = true;

            $("div.alert").remove();

            $(this).find('input').each(function () {
                if ($(this).val() == '') {
                    $('<div class="alert"><p>Phone Field Cant be Empty</p></div>').insertAfter($(this));

                    valid = false;
                }
            });

            if (valid) {
                return true;
            } else {
                return false;
            }
        });
});

你会注意到我做了一些细微的改变：

我重命名abort为valid，因为首先尝试评估积极的事物是个好主意。这也是一个更具解释性的名称：我们为什么要流产？因为它无效 ( valid = false;)。

我没有验证所有输入，而是选择了在表单中找到的输入，使用find(). 以防万一页面上有多个表单。

于 2013-11-08T07:53:29.790 回答