我是JavaScript的新手，所以我不知道为什么此代码无法正常工作，并按应有的方式验证我的HTML5表单。
可以在下面找到的JavaScript代码应该检查浏览器是否支持该required属性，如果不支持，则它将验证表单并检查是否有空白。
我从这个网站上获得了代码。
在包含我的表单的网页正文中，我有以下内容：
以下是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="[email protected]" 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“认为”它具有required属性，这就是为什么我要检查浏览器而不是该属性的原因。
您能否修改代码以检查浏览器而不是属性？
我也需要在<head>标签中添加以下内容：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
我把它放进去了，但是不确定我是否需要它！
编辑4：
正确，当我按下“提交”时，它带有，alert并且当我按下Ok或按下“ x”按钮时，它将以空白形式发送表单。
还可以解释一下为什么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它DOES NOT工作。
当我按下submit该按钮时，它就会显示出来，alert并且当我按下Ok或按下“ x”按钮时，它将以空白形式发送表单。
请您提供解决方法吗？
就像Ethan Brown所说的那样，您可能会缺少attributeSupported函数。在这种情况下，您可以将其添加到您的代码中。它将检查属性（在您的情况下为“必需”）是否受支持
function attributeSupported(attribute) {
return (attribute in document.createElement("input"));
}
编辑：
在您提供HTML代码和有关您的问题的更多信息之后，我就可以在JSFiddle为您创建工作示例。您在$ .browser.safari中遇到的问题是您的javascript代码在此语句上冒昧。经过检查的文档，我发现它在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和您的表单现在将被提交到form标记提供的url中。
请注意，在我的jsFiddle示例中，我有Google地址。在您的示例中，您将必须指定您的页面地址。
编辑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浏览器在userAgent中同时具有“ Chrome”和“ Safari”，但是Safari浏览器仅具有“ Safari”。在您的情况下，您只想识别“ Safari”浏览器。为此，我需要检查userAgent中的“ Safari”，但不包括“ Chrome”，这样就可以保证仅使用Safari浏览器。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句