提交时验证表单

Question

我创建了五个输入字段和一个提交按钮来验证这些字段，但不知何故，它在提交时没有得到验证
在我的JS中，我动态地打印错误。我通过代码进行了调试，得到了正确的值和错误，但它不会动态显示。

function seterror(id, error) {
// set error
var element = document.getElementById(id);
debugger;
console.log(element);
element.getElementsByClassName('ferror')[0].innerHTML = error;
}
function validateForm(e) {
e.preventDefault();
var returnval = true;
var name = document.forms['myForm']['fname'].value;
if (name.length < 5) {
seterror("uname", "abc");
returnval = false;
}
return returnval;
}

.ferror {
color: red;
}

<h1>Form Validation Demo</h1>
<form onsubmit="return validateForm()" name="myForm">
Name*: <input type="text" id="uname" name="fname"><b><span class="ferror"></span></b><br> Password*: <input type="password" id="pass" name="fpass"><b><span class="ferror"></span></b><br> Confirm Password*: <input type="password" id="cpassword" name="fcpass"><b><span class="ferror"></span></b>  <br> Email*: <input type="email" id="uemail" name="femail"><b><span class="ferror"></span></b> <br> Phone*:
<input type="phone" id="uphone" name="fphone"><b><span class="ferror"></span></b> <br>
<input type="submit" class="btn" value="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

考虑到问题下的所有评论，以下是我对更灵活的重制版的建议：

• 不要将ID用于字段
• 使用额外的<label>作为包装
• 不要用无用的空<span>错误元素膨胀HTML-使用JS创建它们
• 使用适当的addEventListener((并在Validation函数中使用其Event
• 使用errors数组存储验证每个部分期间的所有错误
• 只有在最后，如果errors数组中有项目(意味着某些内容无效(，则使用Event.preventDefault()来阻止提交表单

// Utility functions:
const EL = (sel, parent) => (parent || document).querySelector(sel);
const ELS = (sel, parent) => (parent || document).querySelectorAll(sel);
const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// Form validation script:
const EL_form = EL("#myForm");
const validateForm = (evt) => {
// Remove old errors
ELS(".ferror", EL_form).forEach(el => el.remove());
// Prepare an array to hold your errors
const errors = [];
// Get the desired fields:

const EL_fname = EL('[name="fname"]', EL_form);
const EL_fpass = EL('[name="fpass"]', EL_form);
const EL_fcpass = EL('[name="fcpass"]', EL_form);
const EL_femail = EL('[name="femail"]', EL_form);
const EL_fphone = EL('[name="fphone"]', EL_form);
// Validation and errors:

if (EL_fname.value.trim().length <= 4) {
errors.push({name: "fname", text: "Name is too short (min 4 chars)"});
}

if (EL_fpass.value.trim().length <= 8) {
errors.push({name: "fpass", text: "Password is too short (min 8 chars)"});
}

if (EL_fpass.value !== EL_fcpass.value) {
errors.push({name: "fcpass", text: "Passwords do not match"});
}

if (!/^.+@.+./.test(EL_femail.value)) {
errors.push({name: "femail", text: "Invalid Email address"});
}

if (EL_fphone.value.trim().replace(/D/g, "").length <= 6) {
errors.push({name: "fphone", text: "Invalid telephone number"});
}

// Show errors:
errors.forEach(err => {
const EL_error = ELNew("span", {
className: "ferror",
textContent: err.text,
});
EL(`[name="${err.name}"]`, EL_form).closest("label").append(EL_error);
});

// Prevent Form subnit on any error
if (errors.length) {
evt.preventDefault();
}

};
EL_form.addEventListener("submit", validateForm);

form label {
display: block;
}
.ferror {
color: red;
font-weight: 700;
}

<form id="myForm">
<label>Name: <input name="fname" type="text"></label>
<label>Password: <input name="fpass" type="password"></label>
<label>Confirm Password: <input name="fcpass" type="password"></label>
<label>Email: <input name="femail" type="email"></label>
<label>Phone: <input name="fphone" type="phone"></label>
<br>
<input type="submit" class="btn" value="Submit">

</form>