Question

我是JavaScript的新手，所以我不知道为什么这段代码不起作用并验证我的HTML5表单应该如此。

可以在下面找到的JavaScript代码检查浏览器是否支持required属性，如果它没有，那么它将验证表单并检查是否有空格。

我从this website获得了代码。

在包含我的表单的网页正文中，我有：

以下是contactvalidate.js文件：

$('#formTemplate').submit(function() {
if (!attributeSupported("required") || ($.browser.safari)) {
  $("#formTemplate [required]").each(function(index) {
  if (!$(this).val()) {
     alert("Please fill all required fields.");
     return false;
    }
   });
  }
 return false;
});

我是否需要更改此代码中的任何内容或它是否有效？

正如我所说，我是JavaScript的新手所以非常感谢你们给予我的任何帮助。

编辑：

这是我更新的代码：

$(function(){
        $('#contactForm').submit(function() {
            if (!attributeSupported("required") || ($.browser.safari)) {
                   $("#contactForm [required]").each(function(index) {
                         if (!$(this).val()) {
                               alert("Please Fill In All Required Fields.");
                               return false;
                         }
                   });
            }
  return false;
        });
    });


    function attributeSupported(attribute) {
        return (attribute in document.createElement("input"));
    }

我遇到的问题是：当任何字段为空时会出现警报（这很好），但填写字段时，提交按钮不起作用。

我已尝试将第二 return false;更改为return true;，但会按预期提出警告，但无论如何都会发送表单！

编辑2：

这是我的HTML5表单代码：

<form id="contactForm" method="post" action="php/contactform.php">

  <label>Name:</label>
  <input name="name" type="text" pattern="[a-zA-Z. -]+" placeholder="Your Name" title="You can only use letters in this box" required="required" data-required="true" autofocus="autofocus" />

  <label>Contact Number:</label>
  <input name="phone" type="tel" pattern="[0-9. -]+" placeholder="Your Contact Number" title="You can only use numerical values in this box" required="required" data-required="true" maxlength="13" />

  <label>Email:</label>
  <input name="email" type="email" placeholder="me@example.com" required="required" data-required="true"/>

  <label>Type Of Enquiry:</label>
  <input name="enquirytype" type="text" placeholder="Enquiry Type" required="required" data-required="true" maxlength="20" />

  <label>Message:</label>
  <textarea name="message" placeholder="Your Message" required="required" data-required="true"></textarea>

                <br />
                <br />

  <input id="submit" name="submit" type="submit" value="Submit" />
</form>

编辑3：

它不起作用的原因是因为Safari＆＃39;认为＆＃39;它具有required属性，这就是我检查浏览器而不是属性的原因。

您是否可以调整代码以检查浏览器而不是属性？

我的<head>代码中也需要这个：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

我把它放进去但不确定我是否需要它！

编辑4：

是的，当我按提交时，它会显示alert，并且只要按Ok或按下＆＃39; x＆＃39;按钮它通过它发送表格，它是空白的。

您也可以解释为什么在下面的代码中提到了Chrome？

以下是我使用的代码：

//Function Declaration

function attributeSupported(attribute) {
    return (attribute in document.createElement("input"));
}

function isSafariOnly() {
    return navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
}

//Main Code

$(function () {
    $('#contactForm').submit(function () {
        if (!attributeSupported("required") || isSafariOnly()) {
            $("#contactForm [required]").each(function (index) {
                if (!$(this).val()) {
                    alert("Please Fill In All Required Fields.");
                    return false;
                }
            });
        }
        return true;
    });
});

编辑5：

查看JSFiddle

即使在Safari中打开它 DOESN＆＃39; T 也可以。

当我按submit时，我会按alert，然后按Ok或按下＆＃39; x＆＃39;按钮它通过它发送表格，它是空白的。

请你能解决这个问题吗？

Answer 1

与Ethan Brown一样，您可能缺少attributeSupported函数。如果是这种情况，您可以将其添加到您的代码中。它将检查是否支持属性（在您的情况下是＆＃34; s＆＃34;必需＆＃34;）

function attributeSupported(attribute) {
    return (attribute in document.createElement("input"));
}

修改

在您提供HTML代码和有关您的问题的更多信息后，我能够在JSFiddle为您创建工作示例。使用$.browser.safari您的javascript代码时遇到的问题在于此声明。在checking documentation之后我发现它在jQuery 1.9中已被弃用，建议使用特征检测而不是浏览器检测。我为你添加了isSafari函数，并使用该函数代替jQuery浏览器检测。

function isSafariOnly() { return navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1; }

因此，您的主要JavaScript代码现在看起来像

$(function () { $('#contactForm').submit(function () { if (!attributeSupported("required") || isSafariOnly()) { $("#contactForm [required]").each(function (index) { if (!$(this).val()) { alert("Please Fill In All Required Fields."); return false; } }); } return true; }); });

请记住，如果您从函数中返回false，则表单将不会被提交，这就是为什么当您的表单验证失败并且您不想提交表单时，您首先return false。当您的表单通过验证并且一切正常时，您return true和您的表单现在将提交到表单标记操作中提供的网址。

请注意我的jsFiddle示例中我有谷歌地址。在您的示例中，您必须指定您的页面地址。

编辑2：

Also do I need this in my <head> tag: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

是的，你需要它。这是对你的jQuery库的引用（你在代码中看到$是一个jQuery）。但是我不建议在生产中使用jquery-latest，因为如果有一些中断更改，您的代码将停止生产。相反，我会建议使用众所周知的测试版本。例如

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

请注意，您必须<script ...></script>否则无效。


你可以调整代码来检查浏览器而不是   属性？

如果您只需要检查Safari浏览器，请使用：

if (isSafariOnly()) { $("#contactForm [required]").each(function (index) { if (!$(this).val()) { alert("Please Fill In All Required Fields."); return false; } }); }

编辑3：


您也可以解释为什么您在代码中提到了Chrome   下面？

之所以这样，是因为Chrome浏览器同时拥有“Chrome”和“Chrome”。并且＆＃39; Safari＆＃39;在userAgent内部，但是Safari浏览器有Safari＆＃39; Safari＆＃39;只要。在您的情况下，您想要识别Safari＆＃39;仅浏览器。为了做到这一点，我需要检查userAgent以查看Safari＆＃39;但排除＆＃39; Chrome＆＃39;，这样它只能保证Safari浏览器。

HTML5表单验证的Javascript代码不起作用

1 个答案: