<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment1</title>
<link rel="stylesheet" href="valid.css">
<script type="text/javascript" src="formValid.js"></script>
</head>
<body>
<h2>Info Grabber</h2>
<span class="required_fields">* Denotes Required Field</span>
<!--<form id = "contact_form" action="" >/-->
<form id="contact_form" action = "#" method="post" onSubmit="return validateForm(this)" >
<!-- <table> -->
<div class="name">
<div>
<label for='name'>Name<span class="red">*</span></label>
<input type='text' name='name' id='name' placeholder="First and last name" >
<div class="fixed" id="nameError">
Please enter your first and last name with a space between!</div>
</div>
</div>
<div class="address1">
<div>
<label for='address1'>Address Line 1<span class="red">*</span></label>
<input type='text' name='address1' id='address1' >
<div class="fixed" id="address1error">
Please enter your address!</div>
</div>
</div>
<div class="address2">
<div>
<label for='address2'>Address Line 2</label>
<input type='text' name='address2' id='address2'>
</div>
<div>
<label for="county">County<span class="red">*</span></label>
<select id="county" name="county">
<option value="" selected>Please select...</option>
<option value="01">Andivim
<option value="02">Armagh
<option value="03">Carlow
<option value="04">Cavan
<option value="05">Clare
<option value="06">Cork
<option value="07">Derry
<option value="08">Donegal
<option value="09">Down
<option value="10">Dublin
<option value="11">Fermanagh
<option value="12">Galway
<option value="13">Kerry
<option value="14">Kildare
<option value="15">Kilkenny
<option value="16">Laois
<option value="17">Leidivim
<option value="18">Limerick
<option value="19">Longford
<option value="20">Louth
<option value="21">Mayo
<option value="22">Meath
<option value="23">Monaghan
<option value="24">Offaly
<option value="25">Roscommon
<option value="26">Sligo
<option value="27">Tipperary
<option value="28">Tyrone
<option value="29">Waterford
<option value="30">Westmeath
<option value="31">Wexford
<option value="32">Wicklow
</select>
<div id="countyError" class="fixed">
Please select your county!</div>
</div>
</div>
<div class="gender">
<label>Gender<span class="red">*</span></label>
<input type="radio" name="gender" id="male" value="m">Male
<input type="radio" name="gender" id="female" value="f" >Female
<div id="genderError" class="fixed">
Please select your gender! </div>
</div>
<div class="preferences">
<label>Preferences<span class="red">*</span></label>
<input type="checkbox" name="color" id="red" value="r">Red
<input type="checkbox" name="color" id="green" value="g">Green
<input type="checkbox" name="color" id="blue" value="b">Blue
<div id="colorError" class="fixed">Please select a color! </div>
</div>
<div class="phone">
<label for="phone">Phone<span class="red">*</span></label>
<input type="text" id="phone" name="phone" placeholder="Eg. 0871234567">
<div id="phoneError" class="fixed">
Please enter a valid phone number with 10 digits in length! </div>
</div>
<div class="email">
<label for="email">Email<span class="red">*</span></label>
<input type="text" id="email" name="email" placeholder="example@domain.com">
<div id="emailError" class="fixed">
Please enter a valid email in the format "johndoe@domain.com"! </div>
</div>
<div class="password1">
<label for="password1">Password (6-8 characters)<span class="red">*</span></label>
<input type="password" id="password1" name="password1">
<div id="password1Error" class="fixed">
Please enter a valid password containing at least one uppercase letter and one number!</div>
</div>
<div class="password2">
<label for="password2">Verify password<span class="red">*</span></label>
<input type="password" id="password2" name="password2">
<div id="password2Error" class="fixed">
Passwords do not match, please re-enter! </div>
</div>
<div>
<label>
<input type="submit" value="SEND" id="submit">
</label>
</div>
<div>
<label>
<input type="reset" value="CLEAR" id="reset">
</label>
</div>
<!-- </table> -->
</form>
</body>
</html>
</form>
</body>
</html>
我对javascript css和HTML很新。我必须创建一个表单，将输入边框更改为红色，并在输入错误数据时显示错误消息。 我必须使用javascript作为项目的一部分进行验证，所以我不能使用HTML5'required'。当我运行我的程序时，没有错误显示，当我点击提交按钮时，它会清除所有字段。
{“error”：“Shell表单不验证{'html_initial_name'：u'initial-js_lib'，'form'：，'html_name'：'js_lib'，'html_initial_id'：u'initial-id_js_lib'， 'label'：u'Js lib'，'field'：，'help_text'：''，'name'：'js_lib'} {'html_initial_name'：u'initial-js_wrap'，'form'：，'html_name' ：'js_wrap'，'html_initial_id'：u'initial-id_js_wrap'，'label'：u'Js wrap'，'field'：，'help_text'：''，'name'：'js_wrap'}“}
我已经尝试过但我无法让它发挥作用。 任何帮助将不胜感激。
=============================================== ======================================
valid.css
.red {
color: red;
}
.input.error { /* for the error input text fields */
border: 1px red inset;
padding: 2px;
}
.error {
visibility: visible;
color: red;
display: inline-block;
}
/*
table {
border: 0;
}
td {
margin: 0;
padding: 3px 10px 3px 3px;
}
*/
label
{
display: inline-block;
width: 170px;
margin-top:10px;
margin-bottom:10px;
}
.colorLabel {
border: thin solid red;
}
.unColorLabel {
border: thin solid #3FE916;
}
.fixed {
visibility: hidden;
display: inline-block;
}
.required_fields {
color: red;
}
=============================================== =======================================
formValid.js
function validateForm()
{
var name = document.getElementById("name");
if(name.length < 5 || !name.match(/[A-Za-z ]$/))
{
document.getElementById("name").className = "colorLabel";
document.getElementById("nameError").className = "error";
}
else
{
document.getElementById("name").className = "unColorLabel";
document.getElementById("nameError").className = "fixed";
}
var address1 = document.getElementById("address1");
if(address1.length === 0 || !address1.match(/[A-Za-z ]$/))
{
document.getElementById("address1").className = "colorLabel";
document.getElementById("address1Error").className = "error";
}
else
{
document.getElementById("address1").className = "unColorLabel";
document.getElementById("address1Error").className = "fixed";
}
// Return true if correct element is selected
var county= document.getElementById("county");
if(county == "-1")
{
document.getElementById("county").className = "colorLabel";
document.getElementById("countyError").className = "error";
}
else
{
document.getElementById("county").className = "unColorLabel";
document.getElementById("countyError").className = "fixed";
}
// Return true if the one of the radio buttons is checked
var gender = document.getElementsByName("gender");
var isChecked = false;
for (var i = 0; i < gender.length; i++)
{
if (gender[i].checked)
{
isChecked = true; // found one element checked
document.getElementById("genderError").className = "fixed";
break;
}
else
{
document.getElementById("genderError").className = "error";
}
}
var color = document.getElementsByName("color");
var isChecked2 = false;
for (var j = 0; j < color.length; j++)
{
if (color[j].checked)
{
isChecked2 = true; // found one element checked
document.getElementById("colorError").className = "fixed";
break;
}
else
{
document.getElementById("colorError").className = "error";
}
}
var phone = document.getElementById("phone");
if(inputValue.length != 10 || (inputValue.search(/^[0-9]+$/) == -1))
{
document.getElementById("phone").className = "colorLabel";
document.getElementById("phoneError").className = "error";
}
else
{
document.getElementById("phone").className = "unColorLabel";
document.getElementById("phoneError").className = "fixed";
}
var email = document.getElementById("email");
var atPos = email.indexOf("@");
var dotPos = email.lastIndexOf(".");
if((atPos < 1) && (dotPos < atPos + 1) && (inputValue.length < dotPos + 2))
{
document.getElementById("email").className = "colorLabel";
document.getElementById("emailError").className = "error";
}
else
{
document.getElementById("email").className = "unColorLabel";
document.getElementById("emailError").className = "fixed";
}
var password1 = document.getElementById("password1");
var allowed = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,8}$/;
var inputValue = password1.value.trim();
if(!(inputValue.value.match(allowed)))
{
document.getElementById("password1").className = "colorLabel";
document.getElementById("password1Error").className = "error";
}
else
{
document.getElementById("password1").className = "unColorLabel";
document.getElementById("password1Error").className = "fixed";
}
var password2 = document.getElementById("password2");
if(password1.value != password2.value)
{
document.getElementById("password2").className = "colorLabel";
document.getElementById("password2Error").className = "error";
}
else
{
document.getElementById("password2").className = "unColorLabel";
document.getElementById("password2Error").className = "fixed";
}
}
enter code here