Javascript验证表单不适用于HTML
[英]Javascript validation form not working with HTML
问题描述
我需要完成一个显示基本Javascript表单处理的作业。 目的是拥有一个“ details.html”页面，该页面检查所有输入字段是否有效（例如，名称均为文本）。 我试图完成两个文档，但是它们似乎没有正确链接：
什么都没有触发“ validateForm（）”函数，并且任何输入仅在提交时通过，我做错了什么？
function validateForm() { var firstname = document.getElementById("fName").value; var lastname = document.getElementById("lName").value; var email = document.getElementById("email").value; var address = document.getElementById("address").value; var postCode = document.getElementById("pCode").value; var accepted = document.getElementById("accept").checked; var allLetters = /^[a-zA-z]+$/i; var allNumbers = /^[0-9]+$/; var validEmail = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/; var validAddress = new RegExp(allNumbers.source + "|" + allLetters.source); if (address.match(validAddress) && firstname.match(allLetters) && lastname.match(allLetters) && email.match(validEmail) && address != "" && postCode.match(allNumbers) && accepted) { return true; } else { window.alert("Error! Invalid input in form. Please try again."); return false; } }
.header { background-color: tomato; color: white; padding: 2px; } .focusPage { width: 70%; margin-left: auto; margin-right: auto; background-color: lightgrey; min-height: 600px; height: 600px; height: auto !important; } .userDetails { width: 90%; margin-left: auto; margin-right: auto; background-color: white; border: 2px solid black; font-size: 20px; font-family: Arial, Helvetica, sans-serif; padding-top: 20px; padding-bottom: 20px; } .inputs { float: right; direction: ltr; margin-right: 5px; } .acceptTerms { font-size: 15px; font-family: "Times New Roman", Times, serif; } p { font-size: 20px; font-family: Verdana, Geneva, Tahoma, sans-serif; } .thePage { background-color: black; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="someName" content="someContent"> <title> Home </title> <script type="text/javascript" src="myScripts.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body class="thePage"> <div> <div class="focusPage"> <div class="header"> <h1>Welcome user!</h1> </div> <p>This form will allow you to enter your personal details for storage in our database.</p> <p>Be sure to read our <a href="agreement.html">User Agreement</a> before submitting your details</p> <ul class="userDetails"> <form class="userForm" onsubmit="validateForm()" method="post"> <li><label for="inputNames" required>First Name - </label> <label for="inputs"><input type="text" class="inputs" id="fname" name="fname"></label></li> <li><label for="inputNames">Last Name - </label> <label for="inputs" required><input type="text" class="inputs" id="lname" name="lname"></li> <li><label for="inputNames">Email - </label> <label for="inputs" required><input type="email" class="inputs" id="email" name="email"></li> <li><label for="inputNames">Address number - </label> <label for="inputs" required><input type="text" class="inputs" id="address" name="address"></li> <li><label for="inputNames">Post code - </label> <label for="inputs" required><input type="text" class="inputs" id="pCode" name="pCode"></li> <li><label for="inputNames">Additional Detail - </label></li> <textarea rows="5" cols="50" class="textfield" placeholder="Add detail here..."></textarea> <div class="agreement"> <input type="checkbox"> <label class="acceptTerms" id="accept">I Accept the User Agreement</label> </div> <input type="submit" value="Submit"> </form> </ul> </div> </div> </body> </html>
1 个解决方案
解决方案1
1 2018-08-12 08:23:52
JS：您提到了错误的 ID，请记住它们区分大小写 。
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
HTML：您在标签标记中提到了必填项，该标记无效，将其添加到输入标记中。
<form class="userForm" onsubmit="validateForm()">
<li><label for="inputNames" >First Name - </label>
<label for="inputs"><input type="text" class="inputs" id="fname" name="fname" required></label></li>
<li><label for="inputNames">Last Name - </label>
<label for="inputs" ><input type="text" class="inputs" id="lname" name="lname" required></li>
<li><label for="inputNames">Email - </label>
<label for="inputs" ><input type="email" class="inputs" id="email" name="email" required></li>
<li><label for="inputNames">Address number - </label>
<label for="inputs" ><input type="text" class="inputs" id="address" name="address" required></li>
<li><label for="inputNames">Post code - </label>
<label for="inputs" ><input type="text" class="inputs" id="pCode" name="pCode" required></li>
<li><label for="inputNames">Additional Detail - </label></li>
<textarea rows="5" cols="50" class="textfield" placeholder="Add detail here..."></textarea>
<div class="agreement">
<input type="checkbox" required> <label class="acceptTerms" id="accept">I Accept the User Agreement</label>
</div>
<input type="submit" value="Submit">
</form>
具有html表单验证的Javascript不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.