Question

我正在尝试使用HTML5 Patterns和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

但是因为什么原因它没有验证表格！你能告诉我这里我做错了什么吗？

Answer 1

对JS / jQuery没有任何 ANY 需求。一切都可以通过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，而不是$("#element").on("click", function(){，而不是.click(function(){或.submit(function(){。

Answer 2

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

    abort = true;
}

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

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

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

完整代码：

$(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()选择了在表单中找到的输入。以防万一页面上有多个表单。

联系表格验证问题

2 个答案:

HTML