表单提交，即使它没有通过JavaScript进行验证
我正在制作一个简单的表单，并为每个字段制作了一个函数来验证。但是当我通过live server测试表单时，即使字段没有验证，表单也会提交。除此之外，每个函数似乎都能按预期工作。
function validateForm () {
var firstName = document.getElementById('fname').value;
var phoneNumber = document.getElementById('phonenumber').value;
function firstNameValid () {
if (firstName == "") {
alert("First name empty")
return false;
} else {
return true;
};
};
firstNameValid();
function phoneValid () {
if (phoneNumber == null || phoneNumber == "" || phoneNumber.length < 10) {
alert("Phone number must be defined and not exceed 10 characters")
return false;
} else {
return true;
}
};
phoneValid();
result = firstNameValid() && phoneValid();
};
这是HTML
<body>
<form name="registration" action="page2.html" onsubmit="return validateForm()" method="GET">
<ul>
<li>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" onsubmit="return firstNameValid()"><br>
</li>
<li>
<label for="phonenumber">Phone Number:</label><br>
<input type="text" id="phonenumber" name="phonenumber" onsubmit="return phoneValid()">
</li>
</ul>
<button type="submit" value="Submit">Submit</button>
</form>
<script src="app.js"> </script>
</body>
共有2个答案
您应该返回结果。
null
js lang-js prettyprint-override">function validateForm() {
var firstName = document.getElementById('fname').value;
var phoneNumber = document.getElementById('phonenumber').value;
function firstNameValid () {
if (firstName == "") {
console.log("First name empty")
return false;
} else {
return true;
};
};
function phoneValid () {
if (phoneNumber == null || phoneNumber == "" || phoneNumber.length < 10) {
console.log("Phone number must be defined and not exceed 10 characters")
return false;
} else {
return true;
}
};
return firstNameValid() && phoneValid();
};
<body>
<form name="registration" action="page2.html" onsubmit="return validateForm()" method="GET">
<ul>
<li>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname"><br>
</li>
<li>
<label for="phonenumber">Phone Number:</label><br>
<input type="text" id="phonenumber" name="phonenumber">
</li>
</ul>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
您没有返回结果变量
result = firstNameValid() && phoneValid();
return result;
-
问题内容： 我有一个链接而不是“提交”按钮： 单击后可以提交表单吗？ 问题答案： 最好的方式 最好的方法是插入适当的输入标签： 最好的JS方式 由封闭后的JavaScript代码事件（只选择了向后兼容性如果你还没有这样做： 简单而不可取的方式（以前的答案） 在链接和表单中添加一个属性： 所有方式 无论选择哪种方式，最终都可以调用（标记的DOM对象在哪里）。 您还必须绑定这样的事件处理程序，该事件处
-
本文向大家介绍EasyUI中在表单提交之前进行验证，包括了EasyUI中在表单提交之前进行验证的使用技巧和注意事项，需要的朋友参考一下 使用EasyUi我们可以在客户端表单提交之前进行验证，过程如下：只需在onSubmit的时候使用return $("#form1").form('validate')方法即可，EasyUi中form模块中的from('validate')方法会自行对我们指定的表单
-
问题内容： 我的应用程序中有此表单，我将通过AJAX提交它，但是我想使用HTML5进行客户端验证。因此，我希望能够通过jQuery强制进行表单验证。 我想触发验证而不提交表单。可能吗？ 问题答案： 要检查某个字段是否有效，请使用： 要检查表格是否有效，请使用： 如果要显示某些浏览器具有的本机错误消息（例如Chrome），很遗憾，唯一的方法是提交表单，如下所示： 希望这可以帮助。请记住，并非所有浏览
-
问题内容： 如何仅在文本输入字段上使用Enter键提交表单，而不必添加提交按钮？ 我记得以前曾经这样做过，但是现在我对其进行了测试，除非表单中有一个Submit-type输入字段，否则表单不会提交。 问题答案： $(“input”).keypress(function(event) { if (event.which == 13) { event.preventDefault(); $(“form
-
问题内容： 我有一个配置文件创建表单，其中包含一个电子邮件地址字段。我需要确保用户输入的电子邮件地址格式正确，并且尚未使用。对于格式检查，我通过isValidEmailAddress函数执行了一个简单的客户端验证，效果很好。对于需要检查电子邮件地址是否不存在的另一部分，我向控制器方法执行了一个jquery帖子，如果该电子邮件已被某人使用，则返回一个字符串“电子邮件地址已在使用中”。第一个“ ret
-
问题内容： 所以假设我有3种形式 每个表单都有自己的提交按钮 现在假设我有另一种形式 其唯一的功能是同时提交所有其他3种形式。…现在这里是约束： 当submitAll提交后，它必须使用Ajax这样做，并且最好通过POST将输入的数据从所有其他3种形式转发到processor.php processor.php需要能够区分输入到哪种形式…然后分别处理每种形式的输入 我的问题是..什么是使proces